Delete appended items

Question

I want to add and delete new input fields. As default, I have two fields ready in HTML and when I want to delete them through the script, it works. But when I added new inputs, it doesn't work.

<form action="test.php" method="post" name="days">
<div class="input-row">
  <label>
    1. item: <input name="item1" />
  </label>
  <br />
</div>
<div class="input-row">
  <label>
    2. item: <input name="item2" /><span class="delete"> - Delete</span>
  </label>
  <br />
</div>
<div class="input-row">
<label>
  3. item: <input name="item3" /><span class="delete"> - Delete</span>
</label>
<br />
</div>
<p class="add-new-row">+ Add new field</p>
</form>

<script>
jQuery(document).ready(function() {
  $('p.add-new-row').click(function() {
    var n = $('input').length+1;
    $('<div class="input-row"><label>'
        + n
        + '. item: <input name="item'
        + n
        + '"></input><span class="delete"> - Delete</span></label><br /></div>').appendTo('form[name="days"]').insertBefore('p.add-new-row');
    return false;
  });

  $('.delete').on("click", function() {
    $(this).closest('.input-row').remove();
  return false;
  });
});
</script>

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Jason P, Sep 04 '13 at 17:23
@MattBall Sorry, I think, that it is clear described. It is in context of deleting new items problem. — jurajvt, Sep 04 '13 at 17:26
Look at delegated events http://api.jquery.com/on/#direct-and-delegated-events — Barbara Laird, Sep 04 '13 at 17:33

score 2 · Accepted Answer · answered Sep 04 '13 at 17:31

2

All you need to do is change this:

$('.delete').on("click", function() {
    $(this).closest('.input-row').remove();
    return false;
});

to this:

$(document).on("click", ".delete", function() {
    $(this).closest('.input-row').remove();
    return false;
});

JSFiddle: http://jsfiddle.net/epaT9/

The DOM is already loaded when you start adding new elements, so you have to reference the document.

answered Sep 04 '13 at 17:31

Tricky12

6,752
1
27
35

you can also use parent() instead of closest – kangoroo Sep 04 '13 at 17:32

Delete appended items

1 Answers1