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 .
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 .
Subscribe : https://www.youtube.com/channel/UCS3W5vFugqi6QcsoAIHcMpw
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>
What are the differences? Do they each have specific use contexts?
In this article we will discuss full details and comparison of both Ember.js and Vue.js
In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.
Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.