如何使用jquery删除第一个div以外的克隆元素div [英] How to remove cloned element div except first div using jquery

问题描述

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

<表格><tr><td><p class="label_text">名称:</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">品牌:</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">型号:</p></td><td><input name="model_number[]" type="text" value="" id="model_number" class="input_text" style="width: 126px;"/></td></tr><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;">移除项目</p>
<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;">在此处添加新项目</a></p>

我的 jquery 代码是这样的:

<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script><脚本>jQuery(文档).ready(函数(){变量 id=0;无功最大值=10；jQuery('#add_item').click(function(){var button = $('#item_details').clone();身份证++;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();});});

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

解决方案

问题是你订阅了 .remove 元素在页面加载时的点击事件.您克隆的 div 中的 .remove 元素将不属于此订阅的一部分.您还必须使用 事件委托 来订阅页面加载后创建的新元素:

替换:

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();//如果不是原始 div (id == item_details)if(parentDiv.attr('id') !== 'item_details') {parentDiv.remove();}e.preventDefault();});

I have a problem with removing cloned div. I*m unable to remove the cloned div which div clicked on to be remove. My code is like below:

<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>

And my jquery code like this:

<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>

I tried like this. For every cloned div I appended new div id with increment number. But I'm unable to remove the particular cloned div. First div dont be removed. please help me how to solve this. Thanks.

解决方案

The problem is that you subscribe to .remove elements click event at page load. The .remove elements inside your cloned divs will not be part of this subscribe. You have to use event delegation to subscribe to new elements created after page load as well:

replace:

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

by

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

Also, a simpler solution will be to just remove the parent div of your clicked .removeelement:

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();
});

这篇关于如何使用jquery删除第一个div以外的克隆元素div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！