javascript - 如何使用 jquery 删除除第一个 div 之外的克隆元素 div

Question

我在删除克隆的 div 时遇到问题。我无法删除 div 单击要删除的克隆 div。我的代码如下:

<div id="item_details">
    <table>
        <tr>
            <td>
                <p class="label_text">Name:</p>
            </td>
            <td>
                <input name="item_name[]" type="text" value="" id="item_name" class="input_text" style="width: 126px;" />
            </td>
            <td>
                <p class="label_text">Brand:</p>
            </td>
            <td>
                <input name="item_brand[]" type="text" value="" id="item_brand" class="input_text" style="width: 126px;" />
            </td>
            <td>
                <p class="label_text">Model No:</p>
            </td>
            <td>
                <input name="model_number[]" type="text" value="" id="model_number" class="input_text" style="width: 126px;" />
            </td>
        </tr>
    </table>
    <p style="margin:-16px 0px 0px 600px;">
        <a href="javascript:void(0)" name="remove_item" class='remove' id="remove_item" style="font-weight:bold;color:red;font-size:16px;">Remove Item</a>
    </p>
</div>

<div id="new_item_details" class="new_item_details"></div>

<p style="margin:0px 0px 0px 0px;">
    <a href="javascript:void(0)" name="add_item" id="add_item" style="font-weight:bold;font-size:16px;">Add New Item Here</a>
</p>

我的 jquery 代码是这样的:

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<script>

jQuery(document).ready(function(){
    var id=0;
    var max=10;
    jQuery('#add_item').click(function(){

        var button = $('#item_details').clone();

        id++;
        button.find('input').val('');
        button.removeAttr('id');
        button.insertBefore('.new_item_details');
        button.attr('id','new_'+id);        

    });

    jQuery('.remove').click(function(e){
        jQuery("#new_1").last().remove();
        //jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
        e.preventDefault();             
    });

});


</script>

我试过这样。对于每个克隆的 div，我都附加了带有增量编号的新 div id。但我无法删除特定的克隆 div。第一个 div 不要被删除。请帮我解决这个问题。谢谢。

Answer 1

问题是您在页面加载时订阅了 .remove 元素的点击事件。克隆的 div 中的 .remove 元素不会成为此订阅的一部分。你必须使用 event delegation订阅页面加载后创建的新元素:

替换:

jQuery('.remove').click(function(e){

由

jQuery(document).on('click', '.remove', function(e){

此外，一个更简单的解决方案是只删除您点击的 .remove 元素的父 div:

jQuery(document).on('click', '.remove', function(e){
    var parentDiv = jQuery(this).parent().parent();
    // if not original div (id == item_details)
    if(parentDiv.attr('id') !== 'item_details') {
        parentDiv.remove();
    }
    e.preventDefault();
});