Question

我试图通过点击按钮来生成新的表单组。但之后我无法删除所选组，因为click事件不起作用。这里有小提琴示例：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));

Answer 1

您不能在网页上拥有多个具有相同id的项目。改为使用一个类。

另外，对于动态绑定，您应该使用

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

// 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));

无法在点击时删除动态生成的输入

2 个答案: