Как убрать по клику клонированный элемент - PullRequest
1 голос
/ 14 апреля 2020

Я работаю над заданием, и у меня возникли некоторые проблемы.

У меня есть вход, выбор и кнопка, которую нужно клонировать при нажатии этой кнопки. После того, как она нажата, мне нужна еще одна кнопка, при нажатии которой исчезает клонированный элемент.

Пока у меня есть все до последней кнопки, которая заставляет его исчезнуть.

enter image description here

Вот мой код:

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

1 Ответ

1 голос
/ 14 апреля 2020
  1. Вам нужно использовать классы вместо идентификаторов, поскольку идентификаторы должны быть уникальными
  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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...