html li onclick,javascript - Remove clicked <li> onclick - Stack Overflow

UPDATE

Plain JS delegation

Add the eventListener to the UL to delegate the click even on dynamically inserted LIs:

document.getElementById("ul").addEventListener("click",function(e) {

var tgt = e.target;

if (tgt.tagName.toUpperCase() == "LI") {

tgt.parentNode.removeChild(tgt); // or tgt.remove();

}

});

jQuery delegation

$(function() {

$("#submitButton").on("click",function() {

var text = $("#item").val(); //getting value of text input element

var li = $('

').text(text)

$("#ul").prepend(li);

});

$("#ul").on("click","li",function() {

$(this).remove();

});

});

Original answer

Since you did not mention jQuery

var listItems = document.getElementsByTagName("li"); // or document.querySelectorAll("li");

for (var i = 0; i < listItems.length; i++) {

listItems[i].onclick = function() {this.parentNode.removeChild(this);}

}

you may want to wrap that in

window.onload=function() { // or addEventListener

// do stuff to the DOM here

}

Re-reading the question I think you also want to add that to the dynamic LIs

li.innerHTML = text; //inserting text into newly created

element

li.onclick = function() {

this.parentNode.removeChild(this);

// or this.remove(); if supported

}

Here is the complete code as I expect you meant to code it

window.onload=function() {

var button = document.getElementById("submitButton");

button.onclick = addItem;

}

function addItem() {

var textInput = document.getElementById("item"); //getting text input

var text = textInput.value; //getting value of text input element

var ul = document.getElementById("ul"); //getting element

• to add element to

var li = document.createElement("li"); //creating li element to add

li.innerHTML = text; //inserting text into newly created

element

li.onclick = function() {

this.parentNode.removeChild(this);

// or this.remove(); if supported

}

if (ul.childElementCount == 0) { //using if/else statement to add items to top of list

ul.appendChild(li); // will add if count of ul children is 0 otherwise add before first item

}

else {

ul.insertBefore(li, ul.firstChild);

}

}

In case you want to use jQuery, the whole thing gets somewhat simpler

$(function() {

$("#submitButton").on("click",function() {

var text = $("#item").val(); //getting value of text input element

var li = $('

')

.text(text)

.on("click",function() { $(this).remove()});

$("#ul").prepend(li);

});

});