如何在单击克隆元素时删除

Question

我正在执行一项任务，但遇到了一些麻烦。

我有一个输入、选择和按钮，当按下该按钮时需要克隆。按下后，我需要另一个按钮，单击该按钮会使克隆的项目消失。

到目前为止，我已经完成了一切，直到最后一个按钮使它消失。

这是我的代码：

$(document).ready(function() {
    $("#masT").click(function() {
        $("#nuevo-tel").clone(true).append($('<input type="button" value="-" id="menos"/>')).appendTo(".grupo-tel");
    });
});
$("#menos").click(function() {
    $(this).closest('div').find('#todo-tel').remove();
});

<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>

Answer 1

1. 您需要使用类而不是 id，因为 id 需要是唯一的
2. 您需要使用事件委托$(document).on("click", ".menos", function() {})

检查以下代码：

$(document).ready(function() {
  $("#masT").click(function() {
    $("#nuevo-tel").clone(true).append($('<input type="button" value="-" class="menos"/>')).appendTo(".grupo-tel");
  });

  $(document).on("click", ".menos", function() {
    $(this).closest('.nuevo-tel').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <div id="todo-tel">
    <div class="grupo-tel">
      <span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
      <button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
    </div>
  </div>
</div>