javascript - 添加带有数据的新 div 并在单击时删除它们

Question

我想在单击加号时添加新的 div，并在单击叉号时删除它们。这是link的示例图像。在加号上，我想添加新行，如十字符号(行中包括颜色、尺寸和数量，如 1 和十字符号用于删除)。这是我的 html。

<div class="row select_cart">
    <div class="col-md-12">
        <div class="col-sm-4">
            <div class="new_select">
                <select class="form-control" id="attribute137" name="super_attr[137]">
                    <option>COLOR</option>
                    <option>Lime Black</option>
                    <option>Orange Black</option>
                </select>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="new_select">
                <select class="form-control">
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3 col-xs-10">
            <div class="new_select ">
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </div>
        <div class="col-sm-1 col-xs-2">
            <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt="" /></a>
        </div>
    </div>
</div>

我可以像这样使用克隆 ($("div[id^='myrows']").after($('#myrows').clone());) 或复制代码一次又一次地使用相同的 html 但问题是如何在每一行上附加特定的十字符号并在单击它时删除。我稍微更改了我的代码。

HTML :

 <div class="row2">

                </div>
JS:

    $(".add").click(function(){
           var fld = ' <div class="row select_cart2"> <div class="col-md-12"> <div class="col-sm-4"> <div class="new_select"> <select class="form-control"> <option>COLOR</option> <option>Lime Black</option> <option>Orange Black</option> </select> </div> </div> <div class="col-sm-4"> <div class="new_select"> <select class="form-control"> <option>7</option> <option>8</option> <option>9</option> </select> </div> </div> <div class="col-sm-3 col-xs-10"> <div class="new_select "> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </div> <div class="col-sm-1 col-xs-2"> <a class="button delete" title="add unlimited selections"> <img src="images/item_add.png" alt=""> </a> </div> </div> </div>';

jQuery('.row2').append(fld);

});
    $(".delete").on("click", ".button.delete", function(e){
    $(this).closest(".row.select_cart2").remove();
    e.preventDefault();
});

Answer 1

假设您在一个 div 中有这些元素，例如:

<div id="container">
…
</div>

然后，您可以使用单个事件处理程序来实现所有删除，如下所示:

$("div#container").on("click", ".button.delete", function(e){
    $(this).closest(".row.select_cart").remove();
    e.preventDefault();
});