Я пытаюсь удалить только выбранный элемент списка, но он работает только тогда, когда вручную добавить элемент в код и заметку с помощью JavaScript, но я хочу добавить и удалить элемент в список с помощью кода, пожалуйста, помогите спасибо. Я хочу иметь возможность добавлять элементы к элементу ul и удалять их при нажатии на x в верхнем правом углу.

{amp}lt;div class="todocontent"{amp}gt; {amp}lt;ul id="todolist" class="todolist"{amp}gt; {amp}lt;li id="todoitem" class="todoitem"{amp}gt; {amp}lt;div class="todotextheader"{amp}gt; {amp}lt;div class="todotxthd"{amp}gt;{amp}lt;h3{amp}gt;To do note Header{amp}lt;/h3{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="delete"{amp}gt;{amp}lt;i id="deletex" class="far fa-window-close deletex" {amp}gt;{amp}lt;/i{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="todotext"{amp}gt; {amp}lt;p{amp}gt;this is the main text of the todo note{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="addcontainer"{amp}gt; {amp}lt;div class="addtextheader"{amp}gt; {amp}lt;input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="addtext"{amp}gt; {amp}lt;textarea name="addtxt" id="addtxt" cols="79" rows="7"{amp}gt;{amp}lt;/textarea{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="addbtn"{amp}gt; {amp}lt;button id="add"{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

мой JS:

 document.getElementById('add').addEventListener('click', function(){ //get the text and the text header from the fields var addtxtheader = document.getElementById('addtxtheader').value; var addtxt = document.getElementById('addtxt').value; // get the list var list = document.getElementById('todolist'); //create elements var listitem = document.createElement('li') var todotxtheader = document.createElement('div'); var todotxthd = document.createElement('div'); var deleteitem = document.createElement('div'); var deletex = document.createElement('i'); var todohtxt = document.createElement('h3'); var todotext = document.createElement('div'); var todotxt = document.createElement('p'); //add classes to their respected elements listitem.classList.add('todoitem'); todotxtheader.classList.add('todotextheader'); todotxthd.classList.add('todotxthd'); deleteitem.classList.add('delete'); todotext.classList.add('todotext'); //append elements list.insertBefore(listitem, list.childNodes[0]) listitem.appendChild(todotxtheader); todotxtheader.appendChild(todotxthd); todotxthd.appendChild(todohtxt); todotxtheader.appendChild(deleteitem); deleteitem.appendChild(deletex); deletex.innerHTML = '{amp}lt;i id="deletex" class="far fa-window-close deletex" {amp}gt;' listitem.appendChild(todotext); todotext.appendChild(todotxt) //assign the input value todohtxt.innerHTML = addtxtheader; todotxt.innerHTML = addtxt; }) document.getElementById('deletex').addEventListener('click', function(){ var item = this.parentNode.parentNode.parentNode; var parent = item.parentNode; parent.removeChild(item); }) 

мой код: https://jsfiddle.net/c2rkm7tx/

Вам нужно перебрать все элементы и добавить прослушиватель событий. Для нового элемента запустите функцию addListener, чтобы добавить прослушиватель событий для новых элементов. Вы можете увидеть мой пример

 document.getElementById('add').addEventListener('click', function(){ document.getElementById('todolist').innerHTML  = '{amp}lt;li id="todoitem" class="todoitem"{amp}gt;'  '{amp}lt;div class="todotextheader"{amp}gt;'  '{amp}lt;div class="todotxthd"{amp}gt;'  '{amp}lt;h3{amp}gt;'  document.getElementById('addtxtheader').value  '{amp}lt;/h3{amp}gt;'  document.getElementById('addtxt').value   '{amp}lt;/div{amp}gt;'  '{amp}lt;div class="delete"{amp}gt;{amp}lt;i id="deletex" class="far fa-window-close deletex" {amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/div{amp}gt;'  '{amp}lt;/div{amp}gt;'  '{amp}lt;div class="todotext"{amp}gt;'  '{amp}lt;p{amp}gt;this is the main text of the todo note{amp}lt;/p{amp}gt;'  '{amp}lt;/div{amp}gt;{amp}lt;/li{amp}gt;'; addListener() }) function addListener(){ var elements = document.getElementsByClassName('delete'); for(var element in elements){ elements[element].addEventListener('click', function(e){ e.target.parentNode.parentNode.parentNode.remove(); }) } } addListener(); 
 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1.0"{amp}gt; {amp}lt;meta http-equiv="X-UA-Compatible" content="ie=edge"{amp}gt; {amp}lt;title{amp}gt;ToDo{amp}lt;/title{amp}gt; {amp}lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.css"{amp}gt; {amp}lt;script src='https://kit.fontawesome.com/a076d05399.js'{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;link rel="stylesheet" href="todo.css"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="addcontainer"{amp}gt; {amp}lt;div class="addtextheader"{amp}gt; {amp}lt;input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="addtext"{amp}gt; {amp}lt;textarea name="addtxt" id="addtxt" cols="79" rows="7"{amp}gt;{amp}lt;/textarea{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="addbtn"{amp}gt; {amp}lt;button id="add"{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="todocontainer"{amp}gt; {amp}lt;div class="todoheader"{amp}gt; {amp}lt;h1{amp}gt;TO DO DONE{amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="todocontent"{amp}gt; {amp}lt;ul id="todolist" class="todolist"{amp}gt; {amp}lt;li id="todoitem" class="todoitem"{amp}gt; {amp}lt;div class="todotextheader"{amp}gt; {amp}lt;div class="todotxthd"{amp}gt;{amp}lt;h3{amp}gt;To do note Header{amp}lt;/h3{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="delete"{amp}gt;{amp}lt;i id="deletex" class="far fa-window-close deletex" {amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="todotext"{amp}gt; {amp}lt;p{amp}gt;this is the main text of the todo note{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="addcontainer"{amp}gt; {amp}lt;div class="addtextheader"{amp}gt; {amp}lt;input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="addtext"{amp}gt; {amp}lt;textarea name="addtxt" id="addtxt" cols="79" rows="7"{amp}gt;{amp}lt;/textarea{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="addbtn"{amp}gt; {amp}lt;button id="add"{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script src="todo.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Вот простое решение вашей проблемы! Извините, если я не понял, что вы имели в виду ..

 document.getElementById('add').addEventListener('click', function(){ //get the text and the text header from the fields var addtxtheader = document.getElementById('addtxtheader').value; var addtxt = document.getElementById('addtxt').value; // get the list var list = document.getElementById('todolist'); //create elements var listitem = document.createElement('li') var todotxtheader = document.createElement('div'); var todotxthd = document.createElement('div'); var deleteitem = document.createElement('div'); var deletex = document.createElement('i'); var todohtxt = document.createElement('h3'); var todotext = document.createElement('div'); var todotxt = document.createElement('p'); //add classes to their respected elements listitem.classList.add('todoitem'); todotxtheader.classList.add('todotextheader'); todotxthd.classList.add('todotxthd'); deleteitem.classList.add('delete'); todotext.classList.add('todotext'); //append elements list.insertBefore(listitem, list.childNodes[0]) listitem.appendChild(todotxtheader); todotxtheader.appendChild(todotxthd); todotxthd.appendChild(todohtxt); todotxtheader.appendChild(deleteitem); deleteitem.appendChild(deletex); deletex.innerHTML = '{amp}lt;i id="deletex" class="far fa-window-close deletex" {amp}gt;' listitem.appendChild(todotext); todotext.appendChild(todotxt) //assign the input value todohtxt.innerHTML = addtxtheader; todotxt.innerHTML = addtxt; }) document.addEventListener('click', function(e){ e=(e||window.event); e.preventDefault(); const path=e.path; path.forEach(elem={amp}gt;{ if(elem!=window{amp}amp;{amp}amp;elem!=document{amp}amp;{amp}amp;elem!=document.documentElement) { if(elem.id=="deletex"){ var item = elem.parentNode.parentNode.parentNode; var parent = item.parentNode; parent.removeChild(item); } } }); }) 
 {amp}lt;div class="todocontent"{amp}gt; {amp}lt;ul id="todolist" class="todolist"{amp}gt; {amp}lt;li id="todoitem" class="todoitem"{amp}gt; {amp}lt;div class="todotextheader"{amp}gt; {amp}lt;div class="todotxthd"{amp}gt;{amp}lt;h3{amp}gt;To do note Header{amp}lt;/h3{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="delete"{amp}gt;{amp}lt;i id="deletex" class="far fa-window-close deletex" {amp}gt;X{amp}lt;/i{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="todotext"{amp}gt; {amp}lt;p{amp}gt;this is the main text of the todo note{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="addcontainer"{amp}gt; {amp}lt;div class="addtextheader"{amp}gt; {amp}lt;input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="addtext"{amp}gt; {amp}lt;textarea name="addtxt" id="addtxt" cols="79" rows="7"{amp}gt;{amp}lt;/textarea{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="addbtn"{amp}gt; {amp}lt;button id="add"{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Ваше решение уже должно работать немного более чистый пример:

 document.getElementById('todoitem').addEventListener('click', function(event){ if(event.originalTarget.id == "deletex"){ this.parentElement.removeChild(this); } }) 

Что он делает, так это привязывает обработчик событий к самому элементу ToDo. События Sine DOM всплывают, когда элемент списка срабатывает, когда кто-то щелкает по нему, и он проверяет, был ли этот щелчок на элементе deletex, и если это так, он удаляет себя.

Привязать слушателя этого события к объекту при его создании.

 //create elements var listitem = document.createElement('li') listitem.addEventListener('click', function(event){ if(event.originalTarget.id == "deletex"){ this.parentElement.removeChild(this); } }) var todotxtheader = document.createElement('div'); var todotxthd = document.createElement('div'); 
FUBAR

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,