Как при клике добавить элемент списка, при втором клике удалить тот самый элемент из списка?

Question

подскажите пожалуйста как при клике добавить элемент списка, при втором клике удалить тот самый элемент из списка. Пробывал по 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>

Answer 1

li в запросе убрать надо

$(".data-list").find(`[data-tel='${this.id}']`).remove();

Или еще короче сделать

$(`.data-list li[data-tel='${this.id}']`).remove();

БЛОГ НА HUSL

Как при клике добавить элемент списка, при втором клике удалить тот самый элемент из списка?

Ответы (1 шт):