如何刪除單擊克隆的元素

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

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>