How To Remove The Selected LI From An UL Using Javascript
In This Javascript Tutorial we will See How To Get The Selected <li> Item From An Unordered List <ul> And Remove It On Button Click Event Using Array In JS And Netbeans Editor .
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Javascript: edit selected LI</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="removeLI()">Remove</button>
<ul id="list">
<li>JS</li>
<li>PHP</li>
<li>Java</li>
<li>C#</li>
<li>C++</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<script>
var items = document.querySelectorAll("#list li"),
tab = [], liIndex;
// populate tab with li data
for(var i = 0; i < items.length; i++){
tab.push(items[i].innerHTML);
}
// get li index using tab array on li click event
for(var i = 0; i < items.length; i++){
items[i].onclick = function(){
liIndex = tab.indexOf(this.innerHTML);
console.log(this.innerHTML + " INDEX = " + liIndex);
};
}
function removeLI(){
items[liIndex].parentNode.removeChild(items[liIndex]);
}
</script>
</body>
</html>
OUTPUT:
2 comments
commentshey
Replywhat is 'this' pointing to?
the current item
Reply