Question

在我的html中，我有一个div内的div列表，每个div都有复选框[input type = checkbox]。

我的目标是当我选中复选框并且当我选择删除按钮时，必须删除父div（输入的父：复选框），我试过，但是，我不能。有什么帮助吗？

$("#delbtn").click(function(e) {
    var divLen=$("#checkbox-content div");

    for(var k=0;k<divLen.length;k++)
    {
        if(divLen[k].children("input").attr("checked")){
            divLen[k].remove();
        }
    }
    return false;
});

HTML

<div id="checkbox-content">
    <div><input type="checkbox" name="checkedvalue"/>Some text</div>
    <div><input type="checkbox" name="checkedvalue"/>Some text</div>
    <div><input type="checkbox" name="checkedvalue"/>Some text</div>
</div>
<button id="delbtn">Remove</button>

Answer 1

试试这个：删除已选中复选框的div

$("#delbtn").click(function(e) {
    $("#checkbox-content div").has(':checkbox:checked').remove();
 });

<强> JSFiddle Demo

Answer 2

只需选中所选复选框，引用其父级，然后将其删除即可。漂亮的简单选择器+ 1个衬垫。

$('#checkbox-content :checkbox:checked').parent().remove();

如果“checkbox-content”仅包含复选框，则更小的行：

$('#checkbox-content :checked').parent().remove();

Answer 3

单击按钮，检查选中了哪个复选框，并删除其父元素及其内容。

检查以下代码：

$(document).on('click', '#delbtn', function() {
  $('#checkbox-content input[type=checkbox]').each(function() {
    var that = $(this);
    if (that.is(':checked')) {
       that.closest('div').remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="checkbox-content">
            <div><input type="checkbox" name="checkedvalue"/>Some text one</div>
            <div><input type="checkbox" name="checkedvalue"/>Some text two</div>
<div><input type="checkbox" name="checkedvalue"/>Some text three</div>
            </div>
            <button id="delbtn">Remove</button>

单击按钮时如何删除内部元素

3 个答案: