Question

我试图使用

删除我选中的复选框

$(".gone").removeAttr('checked');

如果您滚动到底部并点击+ Add new Line，它会追加另一个<tr>。如果选中该复选框，我尝试删除<tr>。因此，如果我选中多个框，它将删除所有已检查的<tr>'s。我究竟做错了什么？为什么没有使用上面的代码删除复选框？

这是我的实例：https://jsfiddle.net/nwqmvo36/17/

**** **** UPDATE

尝试使用

 $(document).on("click", "div.rem", function() {
     $(this).closest("tr:checked").remove();
 });

这也不起作用。我尝试了不同的解决方案，我只是不明白我做错了什么。

Answer 1

您不需要使用事件委派。如果要将事件侦听器添加到已加载DOM之后追加的元素，这将是有意义的。在您的情况下，您可以使用类.gone向元素添加事件侦听器，然后找到所有选中的checkboxes并删除父tr。您可以使用以下代码：

$(".gone").on("click", function() {
    $('.no-more-tables') // element container
        .find(":checkbox:checked") // return checked checkbox(es)
        .closest('tr') // return first parent tr
        .remove(); // remove them
});

也是alone

<强>参考

Answer 2

我在这里为您更新了代码。你没有调用复选框的类

sys.stdout

sys.stdout

$(".checkAll").change(function () {
    $(".selectall").prop('checked', $(this).prop("checked"));
    $(".gone").removeAttr('checked');
});

$('.vv div:first-child').on('click', function(){
 $("tbody").append('<tr class="remove"><td><input class="chk" type="checkbox" class="selectall" /></td><td><span class="hdv dsp">Product</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 1</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 2</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 3</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 4</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp">Quantity</span><span class="hdv" contenteditable="true">1</span></td><td><span class="hdv dsp">Price</span><span class="hdv" contenteditable="true">$00.00</span></td></tr>');
});


$('.gone').click(function() {
  $('input:checked.chk').each(function(idx, item){
		var row = $(item).parents(".remove");
    if (row != null)
    	row.remove();
  });
  });

Answer 3

您要删除已检查的属性，而不是对象，您需要使用checked selector

试试这个：

$(".gone:checked").remove();

使用JQuery删除选中的复选框

3 个答案: