Question

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

Answer 1

如何使用额外的容器进行输入？

http://jsfiddle.net/dFpMV/

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

Answer 2

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

然后，在添加元素时，根据该数字创建唯一标识符。

  $("#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>');

在这种情况下，我会避免使用特定的项目名称作为id，使用像item0，item1等通用的东西。

然后，删除

  $("#item" + desiredNumber).remove();
  $(this).remove();

Answer 3

鉴于您附加的标记，它应该只是$(this).prev().remove();并忽略ID。

Answer 4

所有链接都需要具有唯一ID。允许追加具有指定id两次的元素是一个错误。你可以做的是在id的末尾添加一个人为数字，使它们成为唯一的。我会将输入和链接都包装成div，我会为其分配一个唯一的ID，指定一个类来删除链接而不是id并删除div，如($this).parent().remove()

如果您使用的是jQuery 1.7+：另请注意，.live()已弃用，您应该使用.on()（请注意，语法有点不同）。

Answer 5

我为你做了2个例子并添加了一个虚拟变量，这样你就可以看到发生了什么：

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

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

http://jsfiddle.net/JgKRw/示例nr 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

我会实现2号，如果你想改变用户界面，你必须要处理脚本。

顺便说一下，您应该只为一个ID分配一个元素，因此请更改您的ID并使用已分类的类。 http://api.jquery.com/class-selector/

Answer 6

这是我的小提琴： http://jsfiddle.net/JfUAa/

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

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

6 个答案: