Native javascript deletes the specified child element code instance:
This chapter introduces how to use native javascript to delete specified child elements.
Everyone knows that using jquery to implement this function is more convenient, but it is not troublesome to use native javascript. Let me introduce it below.
For how jquery implements this function, please refer to the chapter on the deletion of specified child elements code instances.
Code example:
The code copy is as follows:
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>Wulin.com</title>
<style>
ul li{
width:400px;
height:30px;
line-height:30px;
list-style:none;
}
</style>
<script>
window.onload=function(){
var obt=document.getElementById("bt");
var obox=document.getElementById("box");
var lis=obox.getElementsByTagName("li");
obt.onclick=function(){
obox.removeChild(lis[1]);
}
}
</script>
</head>
<body>
<ul id="box">
<li>Wulin.com welcomes you, only by working hard can you have a better tomorrow. </li>
<li>No one was a master from the beginning and had to work hard. </li>
<li>Every day is new, cherish time. </li>
</ul>
<input type="button" id="bt" value="View effect"/>
</body>
</html>
The above code implements our requirements, and the following will introduce its implementation process.
Code comments:
1.window.onload=function(){}, and execute the code in the function after the document content is completely loaded.
2.var obt=document.getElementById("bt"), get the button element object.
3.var obox=document.getElementById("box"), obtain the element object with the id attribute value box.
4.var lis=obox.getElementsByTagName("li"), get the set of li elements under the box element.
5.obt.onclick=function(){}, register the click event handler function for the button.
6.obox.removeChild(lis[1]), delete the specified child element of the parent element.