Remove
elements on click

Question

I have this script:

var text = ["Ground Beef", "Spaghetti", "Tomatoes", "Onions", "Cheese"];
text.forEach(function(el) {
    var div = document.createElement("p");
    div.className = "list";
    div.innerHTML = el;
    document.body.appendChild(div);
});

Please let me know how to add on click function to delete each for this elements Ground Beef ....

Why is the name of the variable `div` when it stores a paragraph? — Andreas, Feb 11 '21 at 16:24
Does this answer your question? [How to remove an HTML element using Javascript?](https://stackoverflow.com/questions/5933157/how-to-remove-an-html-element-using-javascript) — evolutionxbox, Feb 11 '21 at 16:26

score 0 · Answer 1 · answered Feb 11 '21 at 16:28

You could assign click event via onclick attribute. Then remove the element via e.target

var text = ["Ground Beef", "Spaghetti", "Tomatoes", "Onions", "Cheese"];
text.forEach(function(el) {
    var div = document.createElement("p");
    div.className = "list";
    div.innerHTML = el;
    div.onclick = remover
    document.body.appendChild(div);
});


function remover(e){
  e.target.remove()
}

Remove elements on click

1 Answers1

Remove
elements on click