0

Элементы, которые изначально были добавлены в список, удаляются без проблем. Но элементы, которые после выбора (клик по нужной панели), идут в список, и при клике у них на Х не удаляются.

Почему это происходит и как можно это исправить?

$("#tableList .btn-add").click(function() {
  var icon = $(this).find("i").removeClass("fa fa-plus").addClass("fa fa-check").css("color", "#008000");
  var elemNum = $(this).parent().siblings(".list-link").find(".header-item p").text();
  var li = $("#codesList").append("<li>" + "<span>" + elemNum + "</span>" + "<span class='btn-list-close'>&#10006;</span>" + "</li>");
});
$("#codesList li .btn-list-close").click(function() {
  $(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="table-list" id="tableList">
  <div class="list-item">
    <a href="#" class="list-link">
      <div class="header-item">
        <p>001</p>
      </div>
    </a>
    <div class="footer-item">
      <span class="btn-add"><i class="fa fa-plus" aria-hidden="true"></i></span>
    </div>
  </div>
  <div class="list-item">
    <a href="#" class="list-link">
      <div class="header-item">
        <p>002</p>
      </div>
    </a>
    <div class="footer-item">
      <span class="btn-add"><i class="fa fa-plus" aria-hidden="true"></i></span>
    </div>
  </div>
</div>

1 ответ 1

0

На созданные элементы нужны использовать делегирования события

$(document).on('click', "#codesList li .btn-list-close", function() {
  $(this).parent().remove();
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.