Javascript 如何使用jquery克隆在单击按钮时隐藏和显示移除按钮

我使用的是一个表，单击“添加更多”按钮，然后单击“表行复制”

我希望删除按钮在默认情况下显示为“无”，并在单击添加更多按钮然后在特定表格行上显示删除按钮

$（文档）.ready（函数（）{
var i=1；
$（'more#btn'）。单击（函数（）{
i++；
$clone=$（'#first'）.clone（true）；
$clone.attr（'id'，'row'+i）；
$clone.find（'.btn_remove'）.attr（'data-remove-id'，'row'+i）；
$（'#myTable tbody'）。追加（$clone）；
});
$（'#myTable'）。在（'click'，'btn#u remove'，函数（）上{
var按钮_id=$（此）.data（“删除id”）；
警报（按钮id）
$（“#行”+按钮id+”）.remove（）；
});
});
正文{
填充：20px；
字体系列：Helvetica；
}
#横幅信息{
背景：#fff；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：300px；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
}
#banner-message.alt{
背景：#0084ff；
颜色：#fff；
边缘顶端：40px；
宽度：200px；
}
#banner-message.alt按钮{
背景：#fff；
颜色：#000；
}

星期日
星期一
星期二
星期三
星期四
星期五
去除

无需获取
id
并将字符串合并。。。您可以简单地使用
closest（'tr'）
如下：

$('#myTable').on('click','.btn_remove',function(){ 
     $(this).closest("tr").remove();
});

尽量不使用id，这样您就不必增加以下内容：


$（文档）.ready（函数（）{
$（'.more_btn'）。单击（函数（）{
var cloned_row=$（'#first'）.clone（true）.removeAttr（'id'）；
克隆的行.find（'.btn_remove'）.removeClass（'hide'）；
$（'#myTable tbody'）。追加（克隆的_行）；
});
$（'#myTable'）。在（'click'，'btn#u remove'，函数（）上{
$（this）.tr.remove（）；
});
});
正文{
填充：20px；
字体系列：Helvetica；
}
#横幅信息{
背景：#fff；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：300px；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
}
#banner-message.alt{
背景：#0084ff；
颜色：#fff；
边缘顶端：40px；
宽度：200px；
}
#banner-message.alt按钮{
背景：#fff；
颜色：#000；
}
.隐藏{
显示：无；
}

模块
星期日
星期一
星期二
星期三
星期四
星期五
添加更多
去除
简单的方法是分配一个类，比如说，
.first remove
到第一个
remove
按钮。然后在克隆后删除此类，以便在添加的每个新行上显示
删除
按钮：


$（文档）.ready（函数（）{
var i=1；
$（'more#btn'）。单击（函数（）{
i++；
$clone=$（'#first'）.clone（true）；
$clone.attr（'id'，'row'+i）；
$clone.find（'.btn_remove'）.attr（'data-remove-id'，'row'+i）.removeClass（'first-remove'）；
$（'#myTable tbody'）。追加（$clone）；
});
$（'#myTable'）。在（'click'，'btn#u remove'，函数（）上{
var按钮_id=$（此）.data（“删除id”）；
警报（按钮id）
$（“#行”+按钮id+”）.remove（）；
});
});
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#横幅信息{
背景：#fff；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：300px；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
}
#banner-message.alt{
背景：#0084ff；
颜色：#fff；
边缘顶端：40px；
宽度：200px；
}
#banner-message.alt按钮{
背景：#fff；
颜色：#000；
}
.首先删除{
显示：无；
}

模块
星期日
星期一
星期二
星期三
星期四
星期五
添加更多
去除
您犯了一个小错误


$（文档）.ready（函数（）{
var i=1；
$（'more#btn'）。单击（函数（）{
i++；
$clone=$（'#first'）.clone（true）；
$clone.attr（'id'，'row'+i）；
$clone.find（'.btn_remove'）.attr（'data-remove-id'，'row'+i）；
$（'#myTable tbody'）。追加（$clone）；
});
$（'#myTable'）。在（'click'，'.btn_remove'，函数（）上{
var按钮_id=$（此）.data（“删除id”）；
警报（`${button\u id}`）
$（`${button_id}`）。删除（）；
});
});
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#横幅信息{
背景：#fff；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：300px；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
}
#banner-message.alt{
背景：#0084ff；
颜色：#fff；
边缘顶端：40px；
宽度：200px；
}
#banner-message.alt按钮{
背景：#fff；
颜色：#000；
}

模块
星期日
星期一
星期二
星期三
星期四
星期五
添加更多
去除
首先隐藏按钮，然后单击s
$('#myTable').on('click','.btn_remove',function(){ 
   var button_id = $(this).data("remove-id");  
   $('#'+button_id).remove();  
});

$(document).ready(function() {
var i=1;
jQuery(".btn_remove").hide();
$('#more_btn').click(function() {
    i++;
    $clone = $('#first').clone(true);
    $clone.attr('id', "row" + i);

    $clone.find('.btn_remove').attr('data-remove-id', 'row'+i).show();
   $('#myTable tbody').append($clone);


});

$('#myTable').on('click','.btn_remove',function(){ 
       var button_id = $(this).data("remove-id");  
       alert(button_id)
       $('#row'+button_id+'').remove();  
  });

});