0

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

6
  • 1
    Ну запишите значение id в какой-нибудь data аттрибут, например data-id и по этому аттрибуту ищите в .data-list. Если там это есть то удаляйте, если нет то добавьте новый элемент с этим data аттрибутом и нужным вам содержимым
    – EzioMercer
    25 мая 2022 в 9:36
  • @EzioMercer у него так и написано, только поиск по дата атрибуту не работает. Надо формировать id и работать с ним, jquery динамически добавленныне data-атрибуту в DOM не вносит, по ним поиск работать не будет. Надо тогда явно вписывать как attr('data-.. но тту смысла нет.
    – teran
    25 мая 2022 в 9:56
  • @teran Не понял, если честно. Почему с помощью jQuery я не могу создать элемент с нужным дата аттрибутом, вставить в DOM, а потом найти его, если он есть?)
    – EzioMercer
    25 мая 2022 в 10:03
  • все можете. поиск только с селекторами не будет работать. можете написать например $("<xxx>").attr('data-tel', ...).appendTo("#list") и должно заработать.
    – teran
    25 мая 2022 в 10:16
  • 1
    ан нет. в ответах нашли баг. но относительно написанного выше, аналогичная строка с использованием data() вместо attr не будет потом искаться через селекторы.
    – teran
    25 мая 2022 в 10:20

1 ответ 1

2

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

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

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

$(`.data-list li[data-tel='${this.id}']`).remove();
1
  • или на filter заменить
    – teran
    25 мая 2022 в 10:17

Ваш ответ

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

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