подскажите пожалуйста как при клике добавить элемент списка, при втором клике удалить тот самый элемент из списка. Пробывал по id добвлять и удалять, не получается, remove() удаляет все элементы, remove() first() last() не подходит, нужно удалять тот самый элемент который был нажат и добавлен с номером телефона. Заране спасибо.
//result search click
$(document).on('click', '.search-number__result', function() {
$(this).toggleClass('result-click');
if ($(this).hasClass('result-click')) {
let numberTel = $(this).find('.search-number__tel').text();
$('.data-list').append(`<li class="selected-numbers__item" data-tel='${this.id}'>${numberTel}</li>`);
} else {
$(".data-list li").find(`[data-tel='${this.id}']`).remove();
}
});
.search-number__result {
display: flex;
align-items: center;
padding: 16px;
max-width: 230px;
width: 100%;
border: 1px solid #DADADA;
border-radius: 5px;
background: #FFFFFF;
cursor: pointer;
position: relative;
}
.result-click {
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="search-number__box results-box">
<div class="search-number__title">
</div>
<div class="search-number__wrap">
<div class="search-number__result" id="0">
<div class="search-number__flag">
<img src="https://dialics-site.intertech.dev/wp-content/themes/dialics/assets/search-flag-svg/United-States-of-America-US.svg" alt="Flag" class="img-fluid"></div>
<div class="search-number__content"><span class="search-number__tel">+19895752321</span>
</div>
</div>
</div>
<!--footer results-->
<div class="search-footer row">
<div class="search-footer__box col">
<ol class="data-list p-0 mt-2 mb-0" id="selected-num"></ol>
</div>
<div class="search-footer__button col-12 col-sm-auto">
</div>
</div>
</div>
id
в какой-нибудьdata
аттрибут, напримерdata-id
и по этому аттрибуту ищите в.data-list
. Если там это есть то удаляйте, если нет то добавьте новый элемент с этимdata
аттрибутом и нужным вам содержимымattr('data-..
но тту смысла нет.$("<xxx>").attr('data-tel', ...).appendTo("#list")
и должно заработать.data()
вместоattr
не будет потом искаться через селекторы.