JavaScript Delete Closest Element

Question

I have a function which lets the user add a element to a list onclick. Each element consist of a p element and a delete button:

function addToDo() {

//Get input value of ToDo
var getToDoValue = document.getElementById("toDoInput").value;

var toDoTaks = document.getElementById("toDoTasks");

  //Create Element & set the value to userInput
  var createToDoElement = document.createElement("p");
  createToDoElement.classList.add("toDoElement");
  createToDoElement.innerHTML = getToDoValue;

  //Append to toDo
  toDoTaks.appendChild(createToDoElement);

  //Create Delete Button
  var deleteButton = document.createElement("button");
  deleteButton.innerHTML = "Delete";
  toDoTaks.appendChild(deleteButton);
  deleteButton.classList.add("deleteToDo");

}

This works fine. However, I want to create a new function which enables the user to click on one of the delete buttons which are created when "addToDo()" function is called, but I cant seem to get it to work.

I want to function to delete the clicked button and the above p element. This is what I got so far:

function myFunction() {

  var test = document.querySelectorAll(".deleteToDo");
  var test1 = document.querySelectorAll(".toDoElement")

  test[0].remove();
  test1[0].remove();

}

I know that I need to select in another way, and find a way to select the current cliked "delete" button. Im still new, so there are proberly some mistakes in the code.

To remove an element from the DOM: Get the parent element and call the removeChild method on it by passing the reference to the child as a parameter. `el.parentNode.removeChild(el);`. — ssc-hrep3, Sep 03 '20 at 07:49
Add a `click` event handler (`.addEventHandler()`) on the created button (`deleteButton`) and use `this` (= the clicked button) as reference to delete it and its parent. — Andreas, Sep 03 '20 at 07:50

score 3 · Accepted Answer · answered Sep 03 '20 at 08:07

you can append deleteButton to 'ToDoElement'

function addToDo(){

  //Get input value of ToDo
  var getToDoValue = document.getElementById("toDoInput").value;
  var toDoTaks = document.getElementById("toDoTasks");
  
    //Create Element & set the value to userInput
    var createToDoElement = document.createElement("p");
    createToDoElement.classList.add("toDoElement");
    createToDoElement.innerHTML = getToDoValue;


  //Create Delete Button
    var deleteButton = document.createElement("button");
    deleteButton.addEventListener('click',deleteITem,false)
    deleteButton.innerHTML = "Delete";
    deleteButton.classList.add("deleteToDo");


    createToDoElement.appendChild(deleteButton);
    //Append to toDo
    toDoTaks.appendChild(createToDoElement);
    
  
  } 
  
 
  function deleteITem(event){
    event.path[1].remove()
  }

Thank you! This worked perfectly! Would you care to explain "event.path[1].remove()" breifly? — egx, Sep 03 '20 at 08:14
try to use console.log(event.path) to see the result its return path of event in array also checkout this question [https://stackoverflow.com/questions/26195091/determine-event-path-in-dom-event-bubbling] and [https://www.w3schools.com/JSREF/event_composedpath.asp] — Moufeed Juboqji, Sep 03 '20 at 09:41

score 0 · Answer 2 · answered Sep 03 '20 at 08:01

You can use code to delete para.

var index = 0;
function addToDo() {
//Get input value of ToDo
  var getToDoValue = document.getElementById("toDoInput").value;

  var toDoTaks = document.getElementById("toDoTasks");

    //Create Element & set the value to userInput
    var createToDoElement = document.createElement("p");
    createToDoElement.id = 'p' + index;
    createToDoElement.classList.add("toDoElement");
    createToDoElement.innerHTML = getToDoValue;

    //Append to toDo
    toDoTaks.appendChild(createToDoElement);

    //Create Delete Button
    var deleteButton = document.createElement("button");
    deleteButton.innerHTML = "Delete";
    deleteButton.id = 'btn' + index;
    deleteButton.onclick = function() { onClickRemove(this); };
    toDoTaks.appendChild(deleteButton);
    deleteButton.classList.add("deleteToDo");
    index += 1;
} 

    function onClickRemove(e) {
        var rowId    = e.id.replace('btn','');
         var row = document.getElementById('p'+rowId);
        //alert(rowId);
       if (row != null) {
            tblElement.remove(row);
       }
    }

JavaScript Delete Closest Element

2 Answers2