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

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和代码有点令人费解(因为你显示的删除选项似乎与你添加的容器无关,但我现在得到它).:)