Question

我想只删除已检查的div元素。我的脚本删除所有动态创建的div元素。我一直在做错什么？

HTML：

<div class="container">
    <form>
        <p>Title:</p>
        <input type="text" id="title" />
        <p>Link:</p>
        <input type="text" id="link" />
    </form>
    <br>
    <button class="btn btn-success">Add</button>
    <button class="btn btn-danger">Delete</button>
</div>
<div class="content" style="margin-top:50px">
    <div class="content_wrapper"></div>
</div>

jquery的：

$(function () {
    $(".btn-success").click(function () {
        var title_val = $("#title").val();
        var link_val = $("#link").val();
        $(".content").append('<div class="content_wrapper"><div class="col-xs-6 col-md-4"><ol class="breadcrumb"><h4>' + title_val + '</h4><input type="checkbox" class="checkbox"></ol><a href="http://' + link_val + '" class="thumbnail"></a></div></div>');
    });
    $(document).on("click", ".btn-danger", function () {
        if ($(".checkbox").is(":checked")) {
            $(".content_wrapper").remove();
        }
    });
});

JSfiddle

Answer 1

如果您在包装器中添加复选框，只需在单击的复选框上方找到该类型的closest祖先：

$(document).on("click", ".btn-danger", function() {
    $(".checkbox").each(function(){
        if($(this).is(":checked")) {
            $(this).closest(".content_wrapper").remove();
        }
    });
});

或（如Satpal建议的那样）

$(document).on("click", ".btn-danger", function() {
    $(".checkbox:checked").closest(".content_wrapper").remove();
});

您的HTML和代码在孤立方面有点令人费解（因为您显示的删除选项似乎与您添加的容器无关，但我现在得到它。）：）

如何仅删除已检查的div元素

1 个答案: