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

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>