Блог

Главная - Вопросы по программированию - Javascript: Удаление приглашенных с помощью кнопки удалить

Javascript: Удаление приглашенных с помощью кнопки удалить

#javascript #html #css

Вопрос:

Привет, ребята, я пытаюсь создать список приглашенных, который может добавлять людей в список, и список также может удалить добавленного приглашенного с помощью кнопки «Удалить».

 const input = form.querySelector('input');
const ul = document.getElementById('invitedList');

function createLI(text) {
  const li = document.createElement('li');
  li.textContent = text;
  const label = document.createElement('label');
  label.textContent = 'Confirmed';
  li.appendChild(label);  
  const button = document.createElement('button');
  button.textContent = 'remove';
  button.classList.add('remove');
  li.appendChild(button);
  return li;
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createLI(text);
  ul.appendChild(li);
  
const remove = document.querySelectorAll(".remove") //the problem lies here
remove.forEach(i => {
  i.addEventListener('click', (e) => {
  const li = e.target.parentNode;
  const ul = li.parentNode;
  ul.removeChild(li)  
  
   })
  });

})

Это работает по назначению (может удалять приглашенных), но консоль выдает ошибку каждый раз, когда я пытаюсь удалить следующим образом:

Неперехваченная ошибка типа: Не удается прочитать свойство ‘removeChild’ значения null в элементе HTMLButtonElement.

Как я могу устранить эту ошибку? Ошибка связана с циклом forEach, в котором я прокомментировал.

Это кодовый код: https://codepen.io/ShawnTan15/pen/abJwOvO

Комментарии:

1. Предоставьте свой html-код.

2. @RajdeepDebnath Я опубликовал кодовый код

3. Я обновил код.

Ответ №1:

Пожалуйста, измените свой код следующим образом:

 ...
const remove = document.querySelectorAll(".remove") //the problem lies here
if (remove.length != 0) { // add this loop

  remove.forEach(i => {
    i.addEventListener('click', (e) => {
    const li = e.target.parentNode;
    const ul = li.parentNode;
    if(ul != null) ul.removeChild(li)  // add if statement
  
      })
    });

  })
}

Комментарии:

1. Я попробовал, но он все равно выдает ту же ошибку «removeChild» с нулевым значением

2. @ShawnTan Я только что отредактировал свой ответ. Попробуйте еще раз.

Ответ №2:

Обновленный код JS

 const form = document.getElementById('registrar');
const input = form.querySelector('input');
const ul = document.getElementById('invitedList');

function createLI(text) {
  const li = document.createElement('li');
  li.textContent = text;
  const label = document.createElement('label');
  label.textContent = 'Confirmed';
  li.appendChild(label);  
  const button = document.createElement('button');
  button.textContent = 'remove';
  button.classList.add('remove');
  button.addEventListener('click', (e) => {
  const li = e.target.parentNode;
  const ul = li.parentNode;
  ul.removeChild(li)
  
   });
  li.appendChild(button);
  return li;
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createLI(text);
  ul.appendChild(li);

})
Метки: