How to remove on click a cloned element

Question

I'm working on an assignment and I'm having some trouble.

I have an input, select and button that needs to be cloned when pressed that button. Once it is pressed, I need to have another button that when clicked makes disappear the cloned item.

So far I have everything up until the last button that makes it disappear.

Here's my code:

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

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — showdev, Apr 14 '20 at 17:18

score 1 · Accepted Answer · answered Apr 14 '20 at 17:16

You need to use classes instead of ids, since ids need to be unique
You need to use event delegation $(document).on("click", ".menos", function() {})

Check code below:

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

1 Answers1