如何删除单击克隆的元素

Question

我正在做作业，但遇到了一些麻烦。

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

到目前为止，我已经掌握了所有内容，直到最后一个使它消失的按钮。

这是我的代码：

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

您需要使用类而不是 ID，因为 ID 必须是唯一的
您需要使用事件委托$(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>

如何删除单击克隆的元素

How to remove on click a cloned element

javascript

jquery

clone

append