Simple code to insert and delete data in the web page using a text box.
By Simple modifications in this code, it can be effectively used to implement a comment box, status box and a lot of things used to create a dynamic website.
HTML Code-
<html>
<head>Nodes Insertion and Deletion
</head>
<body>
<h2>
Nodes Insertion Deletion Using JavaScript
</h2>
<div>
<input class="txtbox" placeholder="Enter Value of Node">
<button type="button" class="butn">Add Node in List</button>
<br><br><br>
<input class="txtbox" placeholder="Enter Position of Node">
<button type="button" class="Rbutn">Remove Node from List</button>
<ul></ul>
</div>
<script src="app.js"></script>
</body>
</html>
JavaScript Code-
const btn=document.getElementsByClassName("butn")[0];
const Rbutn=document.getElementsByClassName("Rbutn")[0];
const txt=document.getElementsByClassName("txtbox")[0];
const Rtxt=document.getElementsByClassName("txtbox")[1];
let ul=document.getElementsByTagName("ul")[0];
let ulchild=ul.children;
btn.addEventListener('click',() =>{
let content=txt.value;
if(content){
let li=document.createElement("li");
li.innerHTML=content;
ul.appendChild(li);
}
}
);
Rbutn.addEventListener('click',() =>{
let Rcontent= Rtxt.value;
let tem=Rcontent;
Rcontent=parseInt(Rcontent);
let z = document.getElementsByTagName("li")[Rcontent];
if(z)
{ul.removeChild(z);}
else if(ulchild.length<Rcontent)
{alert("No Element at this position.");}
else if(!Rcontent && !tem)
{alert("You have not enter position.");}
else{
alert("Invalid Position Number");
}
}
);
