closest().remove() works once then stops working

Question

My code dynamically creates new fields, but I am only able to remove the first created field. All other attempts to call the remove function seem to fail and I have no idea why.

Fiddle: https://jsfiddle.net/n2fole00/25xfht1y/

HTML

<div class="acal-position-container">
    <div class="acal-card-container">
        <input type="hidden" name="id[]" value="">
        <div style="background-color:#ADD8E6;padding:15px;margin-top:15px;">
            <div style="text-align:right;margin-bottom:10px;">
                <a href="#" class="remove-position-card"><strong>Remove position </strong></a>
            </div>
            <div class="form-group">
                <label for="title[]">Title</label>
                <input type="text" name="title[]" value="" class="form-control" required>
            </div>
        </div>
    </div>
</div>

<input type="button" id="add_position_card" style="margin-top:5px;" value="Add position">

jQuery

$('.remove-position-card').click(function () {
    $(this).closest('.acal-card-container').remove();
    //console.log('called');
});

$('#add_position_card').click(function () {
    $('.acal-position-container').append('<div class="acal-card-container">' +
  '  <input type="hidden" name="id[]" value="">' +
  '  <div style="background-color:#ADD8E6;padding:15px;margin-top:15px;">' +
  '    <div style="text-align:right;margin-bottom:10px;">' +
  '      <a href="#" class="remove-position-card"><strong>Remove position </strong></a>' +
  '    </div>' +
  '    <div class="form-group">' +
  '      <label for="title[]">Title</label>' +
  '      <input type="text" name="title[]" value="" class="form-control" required>' +
  '    </div>' +
  '  </div>' +
  '</div>');
});

Thanks.

The *reason* the answers work is because if you're adding DOM elements dynamically you have to either (a) add the click handlers to them explicitly (tedious and error-prone), or (b) add the click handler on a containing element and allow the click events to "bubble up" (you can Google that), eliminating the need to add the handler to each element. This is also more efficient, because there's only one handler instead of one per element. — Dave Newton, Mar 29 '16 at 11:27

score 2 · Accepted Answer · answered Mar 29 '16 at 11:25

2

As you are generating html dymamically, use event delegation.

Instead of

$('.remove-position-card').click(function() {

Use

$('.acal-position-container').on('click','.remove-position-card' , function() {

Fiddle

Docs

answered Mar 29 '16 at 11:25

Kartikeya Khosla

18,743
8
43
69

Rino Raj · Answer 2 · 2016-03-29T11:34:28.407

1

You must use event delegation for dynamically created elements.

$('.acal-position-container').on('click','.remove-position-card' ,function() {
  $(this).closest('.acal-card-container').remove();
  //console.log('called');
});

Working Fiddle

Reference

edited Mar 29 '16 at 11:34

answered Mar 29 '16 at 11:25

Rino Raj

6,264
2
27
42

As `.acal-position-container` is present on page load so instead of `$(document)`, `$('.acal-position-container')` would be better selector as shown in my answer. – Kartikeya Khosla Mar 29 '16 at 11:33

closest().remove() works once then stops working

2 Answers2