Javascript 使用jquery删除了特定的附加元素

我对JQuery很陌生，从我的问题可以看出

用户可以将许多新的输入字段附加到表单中。这非常有效，但他们如何删除特定字段？如果他们附加5个输入字段，他们如何删除第三个字段

下面是我下面的代码。当前所做的是在单击时始终删除第一项

        $("#addNewItem").click(function(){
            $("#invoice_items").append('<input type="text" name="name[]" value="name" id="item_name" class="item_name" /><a href="#" id="delete_input"><img src="images/delete.png" /></a>');
        });

        $("#delete_input").live("click", function(){
            $("#item_name").remove();
            $(this).remove();
        });

$（“#添加新项”）。单击（函数（）{
美元（“#发票项目”）。附加（“”）；
});
$（“删除输入”）.live（“单击”，函数（）{
$（“#项目名称”）.remove（）；
$（this.remove（）；
});

首先，计算已添加的输入数并将其存储在变量中

然后，在添加元素时，根据该编号生成唯一标识符

  $("#invoice_items").append('<input type="text" name="name[]" value="name" id="item'+count'" class="item_name" /><a href="#" id="delete_input"><img src="images/delete.png" /></a>');

---

给定附加的标记应该是

$（this）.prev（）.remove（）并忽略id。
所有链接都需要具有唯一id。允许使用指定id附加元素两次是错误的。您可以做的是在id的末尾添加一个人工数字，使其唯一。我会将输入和链接都包装到一个div中，我会给它分配一个唯一的id，分配一个类来删除link而不是id，然后删除div，就像
（$this）.parent（）.remove（）

如果您使用的是jQuery 1.7+：还请注意，
.live（）
已被弃用，您应该改用它（注意语法有点不同）
 我给你举了两个例子，并添加了一个虚拟变量，这样你就可以看到发生了什么：

1如果您知道DOM的外观以及删除链接和输入之间的关系，您可以简单地遍历到上一项

    $("#delete_input").live("click", function(){
        $(this).prev().remove();
        $(this).remove();
    });​

示例1正在运行

2将每个项目添加到DOM时，为其指定一个唯一的编号

    var dummyId = 0;    
        $("#addNewItem").click(function(){
            dummyId++;
                $("#invoice_items").append('<input type="text" name="name[]" value="name ' + dummyId +  '" id="item_name" class="item_name" data-id="' + dummyId + '" /><a data-id="' + dummyId + '" href="#" id="delete_input">' + dummyId +  '<img         src="images/delete.png" /></a>');
    });

    $("#delete_input").live("click", function(){
        var deletedId = $(this).data("id"); // Get the ID of the clicked link
        $("input[data-id='" + deletedId + "']").remove(); // Seach for an input which has the ID
        $(this).remove();
    });​

http://jsfiddle.net/JgKRw/1/ Example nr 2 in Action

var dummyId=0；
$（“#添加新项”）。单击（函数（）{
dummyId++；
美元（“#发票项目”）。附加（“”）；
});
$（“删除输入”）.live（“单击”，函数（）{
var deletedId=$（this.data（“id”）；//获取单击链接的id
$（“输入[数据id='”+deletedId+“]]）。删除（）；//搜索具有id的输入
$（this.remove（）；
});​
http://jsfiddle.net/JgKRw/1/ 示例2正在运行

我会实现第2个，因为如果你想改变UI，你必须处理好脚本

顺便说一句，您应该只为一个ID分配一个元素，所以更改您的ID并使用类来代替。
使用额外的输入容器怎么样


$（“#添加新项”）。单击（函数（）{
美元（“#发票项目”）。附加（“”）；
});
$（“删除输入”）.live（“单击”，函数（）{
$（this.parent（）.remove（）；
});
这是我的小提琴：

（函数（）{
变量计数=0，
items=document.getElementById（“输入项”），
$items=$（items），
第三方物流=''；
函数addItem（）{
$items.append（tpl.replace（{{id}}），count++）；
}
函数删除（）{
items.removeChild（this.parentNode）；
}
$（“#添加新项”）。单击（添加项）；
$items.on（“单击”、“a”，删除）；
}());
您使用的是
id
选择器。
id
在文档中必须是唯一的。任何基于
id
的选择器总是只作用于第一个匹配的元素（因为JavaScript需要有效的HTML，因此不会查找第一个元素之外的其他元素）。如果要选择多个元素，请改用类名。不推荐使用live。您不需要删除ID，但它可能会有助于发布帖子。不要重复ID。请看下面我的提琴。如果他使用的是jQuery 1.7+，他应该只使用
on（）
；如果他使用<1.7，他应该使用
delegate（）
。
    var dummyId = 0;    
        $("#addNewItem").click(function(){
            dummyId++;
                $("#invoice_items").append('<input type="text" name="name[]" value="name ' + dummyId +  '" id="item_name" class="item_name" data-id="' + dummyId + '" /><a data-id="' + dummyId + '" href="#" id="delete_input">' + dummyId +  '<img         src="images/delete.png" /></a>');
    });

    $("#delete_input").live("click", function(){
        var deletedId = $(this).data("id"); // Get the ID of the clicked link
        $("input[data-id='" + deletedId + "']").remove(); // Seach for an input which has the ID
        $(this).remove();
    });​

http://jsfiddle.net/JgKRw/1/ Example nr 2 in Action

$("#addNewItem").click(function(){
    $("#invoice_items").append('<div class="input-container"><input type="text" name="name[]" value="name" id="item_name" class="item_name" /><a href="#" id="delete_input">X<img src="images/delete.png" /></a></div>');
});

$("#delete_input").live("click", function(){
    $(this).parent().remove();
});

(function () {
    var count = 0, 
        items = document.getElementById("input_items"),
        $items = $(items),
        tpl = '<div><input type="text" id="{{id}}" /><a href="#">delete</a></div>';
    function addItem(){
        $items.append(tpl.replace("{{id}}", count++));
    }
    function remove(){
        items.removeChild(this.parentNode);
    }
    $("#addNewItem").click(addItem);
    $items.on("click", "a", remove);
}());