Как удалить <li>по клику с ванилью javascript? - PullRequest
0 голосов
/ 14 апреля 2020

У меня проблемы с поиском правильного синтаксиса для удаления элемента. У меня есть элемент списка, который я генерирую с формой, которую я также хочу удалить при нажатии на нее. Вот мой текущий javascript код:

// add to do items
let todoList = [];

function addTodo(item){
  todoList.push(item);
  //display item
}

const addButton = document.querySelector('.btn__display');
const formInput = document.querySelector('.addItem');
const listItems = document.querySelectorAll('li');

addButton.addEventListener('click', function(){
  const todoUl = document.querySelector('ul');
  const todoLi = document.createElement('li');
  todoLi.textContent = formInput.value;
  todoList.push(formInput.value);
  todoUl.appendChild(todoLi);
  formInput.value = '';
});

Пока я могу добавить элемент в свой список задач, но как мне go удалить его одним щелчком мыши?

Ответы [ 3 ]

1 голос
/ 14 апреля 2020

Вы можете добавить прослушиватель onclick к вновь созданному элементу li, чтобы удалить его при нажатии:

todoLi.onclick = (e) => e.target.remove();

// add to do items
let todoList = [];

function addTodo(item) {
  todoList.push(item);
  //display item
}

const addButton = document.querySelector('.btn__display');
const formInput = document.querySelector('.addItem');
const listItems = document.querySelectorAll('li');

addButton.addEventListener('click', function() {
  const todoUl = document.querySelector('ul');
  const todoLi = document.createElement('li');
  todoLi.textContent = formInput.value;
  todoLi.onclick = (e) => e.target.remove();
  todoList.push(formInput.value);
  todoUl.appendChild(todoLi);
  formInput.value = '';
});
<button class="btn__display">btn__display</button>
<input type="text" class="addItem">
<ul></ul>
0 голосов
/ 14 апреля 2020

Попробуйте с этим кодом:

<ul>
 <li onclick="remove(this)">lorem</li>
</ul>
<script>function remove(elem) { elem.parentElemet.removeChild(elem); } </script>
0 голосов
/ 14 апреля 2020

Как и в ответе Луиса, вы можете сделать следующее:

// add to do items
let todoList = [];

function addTodo(item){
  todoList.push(item);
  //display item
}

const addButton = document.querySelector('.btn__display');
const formInput = document.querySelector('.addItem');
addButton.addEventListener('click', function(){
  const todoUl = document.querySelector('ul');
  const todoLi = document.createElement('li');
  todoLi.textContent = formInput.value;
  todoList.push(formInput.value);
  todoUl.appendChild(todoLi);
  formInput.value = '';

  todoLi.addEventListener('click', function () {
      this.remove();
  });
});

Разница в том, что вместо этого мы добавляем прослушиватель событий с функцией, в которой this будет установлено для элемента списка.

https://jsfiddle.net/gy9cLum3/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...