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

我在删除克隆的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>

jQuery（文档）.ready（函数（）{
var-id=0；
var max=10；
jQuery（“#添加_项”）。单击（函数（）{
var按钮=$（“#项目_详细信息”）.clone（）；
id++；
button.find（'input'）.val（''）；
按钮。removeAttr（'id'）；
按钮。在（'.new_item_details'）之前插入；
按钮属性（'id'，'new_'+id）；
});
jQuery（'.remove'）。单击（函数（e）{
jQuery（“#new_1”）.last（）.remove（）；
//jQuery（“#removietem”）.toggle（！$（“#新项目_详细信息”）.is（“：空”）；
e、 预防默认值（）；
});
});

---

我试过了。对于每一个克隆的div，我都会在新的div id后面添加一个增量编号。但是我无法删除特定的克隆div。无法删除第一个div。请帮我解决这个问题。谢谢。

问题在于您订阅了

。删除
元素在页面加载时单击事件。克隆的div中的
.remove
元素将不属于此订阅的一部分。您还必须使用订阅页面加载后创建的新元素：

替换：

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

借

另外，一个更简单的解决方案是只删除单击的
元素的父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();
});

试一试

使用manji使用的事件委托

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

或使用克隆（true）：它将复制事件处理程序（深度复制）

注意：id应该是唯一的

 var id = 0;
jQuery(document).ready(function () {

    var max = 10;
    jQuery('#add_item').click(function () {

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

        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_"+id).remove();
        //jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
        id--;
        e.preventDefault();


    });

});

**

**虽然第一个答案摆在我面前，指出了点击的问题，但我还是会发布这篇文章，因为这是解决删除问题的不同方法

我已经为每个克隆添加了数据属性，并为按钮添加了相应的数据id，因此单击它检查它的id并删除具有该id的表单

因此，如果有帮助的话：）

我尝试了你的代码。它也删除了第一个div。不应该这样removed@user3454479，添加了“防止第一个div删除”。请参阅工作。您可以在原始
上设置
显示：无
。删除
项，然后在克隆项中显示它。
var button = $('#item_details').clone(true);

 var id = 0;
jQuery(document).ready(function () {

    var max = 10;
    jQuery('#add_item').click(function () {

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

        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_"+id).remove();
        //jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
        id--;
        e.preventDefault();


    });

});

        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).attr('data-id', id);
            button.find('.remove').attr('data-id',id); 


        });
            jQuery(document).on('click', '.remove', function(e){
            var thisId = jQuery(this).data('id');
            jQuery('div[data-id="'+thisId+'"]').remove();
            //jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
            e.preventDefault();


        });

        });