Can't remove dynamically generated inputs on click

Question

I was trying to generate a new form group by clicking the button. But after that all I can't remove selected group, because click event doesn't work. here is fiddle example: https://jsfiddle.net/f4v25ert/

    (function($) {
    'use strict';
    $(document).ready(function() {

    $('.add').on('click', function(e) {
      e.preventDefault();
      $('.groups').append('\
        <div class="form-group">\
          <input type="text">\
          <a href="#" id="remove-input">Remove</a>\
        </div>\
      ');
    });

    $('#remove-input').on('click', '.form-group', function(e) {
        e.preventDefault();
      $(this).parent('.form-group').remove();
    });

  });
    }(jQuery));

like this nobody can help! put some code here! – fefe Dec 02 '16 at 10:22 — fefe, Dec 02 '16 at 10:22
I know, check again please – Vlad Ivanov Dec 02 '16 at 10:23 — Vlad Ivanov, Dec 02 '16 at 10:23

mrid · Answer 1 · 2016-12-02T10:31:17.000

-1

You can't have more than one items having the same id on a web page. Use a class instead.

Also, for dynamic binding, you should use

$(document).on('event', 'selector', function(){
    /* your code here */
});

(function($) {
  'use strict';
  $(document).ready(function() {

    $('.add').on('click', function(e) {
      e.preventDefault();
      $('.groups').append('\
        <div class="form-group">\
          <input type="text">\
          <a href="#" id="remove-input" class="remove">Remove</a>\
        </div>\
      ');
    });

    $(document).on('click', '.remove', function(e) {
     e.preventDefault();
      $(this).prev().remove();
      $(this).remove();
    });

  });
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add">Add input</button>
<div class="groups">
  <div class="form-group"><input type="text"></div>
</div>

edited Dec 02 '16 at 10:31

answered Dec 02 '16 at 10:25

mrid

5,782
5
28
71

why the downvote ? – mrid Dec 02 '16 at 10:28
It wasnt the duplicate id which was the problem, your code fixes the issue but your description is a misnomer. And this is a duplicate which already has a perfectly good answer. – Jamiec Dec 02 '16 at 10:28
updated my answer – mrid Dec 02 '16 at 10:32

score -1 · Accepted Answer · answered Dec 02 '16 at 10:30

// Here is your working code
(function($) {
  'use strict';
  $(document).ready(function() {

    $('.add').on('click', function(e) {
      e.preventDefault();
      $('.groups').append('\
        <div class="form-group">\
          <input type="text">\
          <a href="#" class="remove-input">Remove</a>\
        </div>\
      ');
    });

    $(document).on('click','.remove-input' , function(e) {

        e.preventDefault();
      $(this).closest('.form-group').remove();
    });

  });
}(jQuery));

Can't remove dynamically generated inputs on click

2 Answers2