How can delete the clicked item using the click event if all items have the same Id

Question

I'm trying to delete only the selected list item but it is only working when manually add the item in the code and note using javascript, But I want to add and remove element to the list using code please help thanks. I want to be able to add elements to the ul element and remove them when clicked on the x on the top right corner.

 <div class="todocontent">
        <ul id="todolist" class="todolist">
            <li id="todoitem" class="todoitem">
                    <div class="todotextheader">
                        <div class="todotxthd"><h3>To do note Header</h3></div>
                        <div class="delete"><i id="deletex" class="far fa-window-close deletex" ></i> 
                        </div>
                    </div>
                    <div class="todotext">
                        <p>this is the main text of the todo note</p>
                    </div>
            </li>
        </ul>
    </div>





 <div class="addcontainer">
        <div class="addtextheader">
            <input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50">
        </div>
        <div class="addtext">
            <textarea name="addtxt" id="addtxt" cols="79" rows="7"></textarea>
        </div>
        <div class="addbtn">
            <button id="add">+</button>
        </div>
    </div>

my 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 = '<i id="deletex" class="far fa-window-close deletex" >'
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);


})

my code: https://jsfiddle.net/c2rkm7tx/

Answer 1

Your solution should already work a little more cleaner example:

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

What this does is, it binds the event handler to the ToDo item it self. Sine DOM events bubble the list item will get triggered when some one clicks it and it checks if that click was onto the deletex item and if so it will delete itself.

Bind this event listener onto the object when creating it.

//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');

Answer 2

Yo need to loop thru all elements and add an event listener. On new element run the addListener function to add event listener on new elements.. You can see my example

document.getElementById('add').addEventListener('click', function(){

   document.getElementById('todolist').innerHTML += '<li id="todoitem" class="todoitem">'+
                        '<div class="todotextheader">'+
                            '<div class="todotxthd">'+
                            '<h3>'+
                            document.getElementById('addtxtheader').value+
                            '</h3>'+
   document.getElementById('addtxt').value +
                           '</div>'+
                            '<div class="delete"><i id="deletex" class="far fa-window-close deletex" ></i></div>'+
                        '</div>'+
                        '<div class="todotext">'+
                        '<p>this is the main text of the todo note</p>'+
                        '</div></li>';

  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();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.css">
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
    <link rel="stylesheet" href="todo.css">
</head>
<body>
 



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

    <script src="todo.js"></script>
</body>
</html>

Answer 3

Here is a simple solution of your problem! Sorry if I didn't understand what you meant..

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 = '<i id="deletex" class="far fa-window-close deletex" >'
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=>{
  if(elem!=window&&elem!=document&&elem!=document.documentElement)       {
        if(elem.id=="deletex"){
          var item = elem.parentNode.parentNode.parentNode;
          var parent = item.parentNode;
          parent.removeChild(item);
        }
      }
    });


})

<div class="todocontent">
        <ul id="todolist" class="todolist">
            <li id="todoitem" class="todoitem">
                    <div class="todotextheader">
                        <div class="todotxthd"><h3>To do note Header</h3></div>
                        <div class="delete"><i id="deletex" class="far fa-window-close deletex" >X</i> 
                        </div>
                    </div>
                    <div class="todotext">
                        <p>this is the main text of the todo note</p>
                    </div>
            </li>
        </ul>
    </div>





 <div class="addcontainer">
        <div class="addtextheader">
            <input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50">
        </div>
        <div class="addtext">
            <textarea name="addtxt" id="addtxt" cols="79" rows="7"></textarea>
        </div>
        <div class="addbtn">
            <button id="add">+</button>
        </div>
    </div>