javascript - 用删除重复html控件的正确方法是什么

Question

我正在尝试制作一个转发器 html 文本框控件，它将在其下添加另一个字段，并带有删除 btn。“+添加更多”工作正常，但删除 btn 也在其下添加了更多控件。

我想知道实现它的正确方法。

$(function() {

  $('.btn-add-phone').click(function() {
    var sInputGroupPhoneHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Home">Home</option><option value="Mobile">Mobile</option><option value="Other">Other</option></select><span class="input-group-addon input-group-phone-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');

    $(this).append(sInputGroupPhoneHtml);

  });

  $('.btn-add-email').click(function() {
    var sInputGroupEmailHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="email" name="option[]" class="form-control" placeholder="Email" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Personal">Personal</option><option value="Other">Other</option></select><span class="input-group-addon input-group-email-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');

    $(this).append(sInputGroupEmailHtml);

  });

  $('.input-group-email-remove').click(function() {
    $(this).parent().remove();
  });



  jQuery(".toggleControlsPhone a").click(function() {
    jQuery(".showPhoneControls").toggle();
  });

  jQuery(".toggleControlsEmail a").click(function() {
    jQuery(".showEmailControls").toggle();
  });
});

div.input-group-option:last-child input.form-control {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

div.input-group-option span.input-group-addon-remove {
  cursor: pointer;
}

div.input-group-option {
  margin-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="form-group" id="phoneAddMore">
  <label class="control-label">Phone</label>
  <div class="form-group form-group-options">
    <div class="input-group input-group-option col-xs-12">
      <input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%">
      <select class="form-control" style="width:50%">
        <option value="Work">Work</option>
        <option value="Home">Home</option>
        <option value="Mobile">Mobile</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <a hre="#" class="btn-add-phone">+ add more </a>
  </div>

  <div class="clearfix"></div>

</div>

在 JSFiddle 上查看

标签： javascriptjquerytwitter-bootstrap-3

Answer 1

我看到两个问题：

1. 当您 append 时sInputGroupEmailHtml，您将其附加到<a>被点击的标签上。因此，单击这些元素内的任何位置都会冒泡到<a>标签并触发事件以添加新组。我已将其更改为附加到<a>标签的父.form-group级（标签之外和之后<a>），而不是。

2. 当您将点击处理程序绑定到 时.input-group-email-remove，该元素尚不存在于 DOM 中。（仅当您单击“添加更多”按钮时才会添加它。）我使用事件委托将处理程序绑定到#addPhoneMore而不是按钮本身，以便处理程序即使在动态生成的子项上也会触发。我也closest()用来查找.form-group点击按钮的。请参阅动态创建的元素上的事件绑定。

$(function() {

  $('.btn-add-phone').click(function() {
  
    var sInputGroupPhoneHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Home">Home</option><option value="Mobile">Mobile</option><option value="Other">Other</option></select><span class="input-group-addon input-group-phone-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');

    $(this).parent().append(sInputGroupPhoneHtml);

  });

  $('#phoneAddMore').on('click', '.input-group-phone-remove', function() {
    $(this).closest('.form-group').remove();
  });

});

div.input-group-option:last-child input.form-control {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

div.input-group-option span.input-group-addon-remove {
  cursor: pointer;
}

div.input-group-option {
  margin-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="form-group" id="phoneAddMore">
  <label class="control-label">Phone</label>
  <div class="form-group form-group-options">
    <div class="input-group input-group-option col-xs-12">
      <input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%">
      <select class="form-control" style="width:50%">
        <option value="Work">Work</option>
        <option value="Home">Home</option>
        <option value="Mobile">Mobile</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <a hre="#" class="btn-add-phone">+ add more </a>
  </div>

  <div class="clearfix"></div>

</div>