Элементы, которые изначально были добавлены в список, удаляются без проблем. Но элементы, которые после выбора (клик по нужной панели), идут в список, и при клике у них на Х не удаляются.
Почему это происходит и как можно это исправить?
$("#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'>✖</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>