ajax перезагружает ul / li div и сохраняет прослушиватели событий (кроме insertAdjacentHTML)

Question

Цель : перезагрузить только div после ajax-вызовов (добавить или удалить теги) без потери прослушивателей событий в перезагруженном div.Использование insertAdjacentHTML не кажется оптимальным.

Front-end : у меня есть боковая панель с тегами ul / li.Есть модал для добавления / создания тегов;рядом с каждым тегом стоит значок "X", чтобы удалить его при нажатии.

<ul>
  <li><span>A</span><span class=li-untag>X</span> 
  <li><span>B</span><span class=li-untag>X</span> 
  <li><span>C</span><span class=li-untag>X</span> 
  <li><span>D</span><span class=li-untag>X</span>
</ul>

Моя неудачная установка была :

1. отправитьajax (выборочный) вызов в php-сервер для добавления или удаления тегов

2. , если нет ошибок, сервер отправляет обновленный и отформатированный в виде веточки список тегов для статьи.

3. обновил div с помощью innerHTML.

Обновление innerHTML потеряло бы все прослушиватели событий в списке (такие как удаление тега при нажатии X) дореальное обновление страницы.Я попытался запустить addeventlisteners после вызова ajax, но он не сработал.

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

• до удалить тег не является проблемой вставки, и все, что я мог придумать, это скрыть тег при щелчке до тех пор, пока страница не будет обновлена.
• для добавление тегов с insertAdjacentHTML предназначено для добавления новых тегов к списку, но они больше не располагаются в алфавитном порядке, и мне нужно использовать какой-то хакерский javascript для форматирования вывода в соответствии с существующим списком.*

  Я бы предпочел, чтобы php отправлял полный обновленный и отформатированный список для div.

  Есть предложения по более элегантному способу сделать это в vanilla js?

  К вашему сведению: Основные ответы, на которые я опирался:
  Почему слушатели событий могут перестать работать после использования element.innerHTML?
  Возможно лидобавить в innerHTML без уничтожения прослушивателей событий потомков?
  Если элемент DOM удален, его слушатели также удаляются из памяти?
  JS eventListener click исчезает

  Edit : слушатель подключен к классу "li-untag"

  Edit 2 : ответ на запрос комментария для некоторыхбольше кодаВот тег удаления, использующий атомарную библиотеку ajax :

  for(let liUntag of document.querySelectorAll('.li-untag')){
  liUntag.addEventListener("click", () => altUntag(liUntag))};
  
  const altUntag = (el) => {
      atomic("/tags", {
          method: 'POST',
          data: {
              type: 'untag',
              slug: el.getAttribute('data-slug'),
              tag: el.getAttribute('data-untag')
          }
      }).then(function (response) {
          el.closest('li').style.display = 'none';
          console.log(response.data); // xhr.responseText
          console.log(response.xhr);  // full response
      })
      .catch(function (error) {
          console.log(error.status); // xhr.status
          console.log(error.statusText); // xhr.statusText
      });
  };
  

Answer 1

Лучшим решением для чего-то подобного было бы использование делегирования события для присоединения одного слушателя к ul вместо подключения нескольких слушателей к каждому li-untag:

document.querySelector('ul').addEventListener('click', ({ target }) => {
  if (target.matches('.li-untag')) {
    target.closest('li').remove();
  }
});

Если вы не хотите этого делать и хотите сохранить прослушиватель для каждого элемента li-untag, вы можете вставить новый HTML-код, затем отсортировать <li> s и прикрепить прослушиватели к каждому новому li-untag:

const addListeners = () => {
  document.querySelectorAll('.li-untag').forEach((span) => {
    span.addEventListener('click', ({ target }) => {
      target.closest('ul').remove();
    });
  });
};

// on document load:
addListeners();

// after inserting new HTML:
const lis = [...document.querySelectorAll('ul li')];
lis.sort((a, b) => a.children[0].textContent.localeCompare(b.children[0].textContent));
const ul = document.querySelector('ul');
lis.forEach((li) => {
  ul.appendChild(li);
});
addListeners();