Deleted specific appended element with jquery

Question

I'm pretty new to JQuery, as you can tell by my question...

The user can append many new input fields to the form. This works great, but how can they delete a specific field? If they append 5 input fields, how do they delete lets say the third field?

Below is my following code. What is currently does is always delete the first item when clicked.

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

How about using additional container for inputs?

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

First, count the number of inputs you've added and store it in a variable.

Then, when you add the element, make a unique identifier based on that number.

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

I would avoid using the specific item name as the id in this case, use something generic like item0, item1 etc.

Then, to remove

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

Answer 3

Given the markup you appending it should be simply $(this).prev().remove(); and ignore the IDs.

Answer 4

all links need to have unique id. Allowing to append element with specified id twice is an error. What you could do is to add an artificial number at the end of id to make them unique. I would wrap both input and link into a div, i would assign an unique id to it, assign a class to delete link instead of id and remove div like ($this).parent().remove()

If you are using jQuery 1.7+: Also note that .live() is deprecated and you should use .on() instead (note that syntax is however a little bit different).

Answer 5

I made 2 examples for you and adding a dummy variable so you can see whats happend:

1 If you know how to DOM will look like and the relationship between the delete link and the input you can simply traversing to the previous item.

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

http://jsfiddle.net/JgKRw/ Example nr 1 in action

2 You give each item a unique number when you add them to the 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

I would implemented number 2, couse else you have to take care of the script if you want to change the UI.

Btw you should only have one element assigned to an ID, so change your ID and use classes insteed. http://api.jquery.com/class-selector/

Answer 6

Here's my fiddle: 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);
}());