How to use JS code to delete the content displayed on the page, the blogger wrote a code below. If you are interested, you can type it again according to my code. It will have a very magical effect. You can delete a single line or delete all of them. . (The software Sublime Text3 used by bloggers, DW is similar to this)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
<style type="text/css">
table{
margin: 0 auto;
border-collapse: collapse;
}
fieldset{
padding-left: 450px;
margin-top: 12px;
}
.lurn{
padding-top: 12px;
}
#anniu {
margin: 0 auto;
margin-top: 5px;
margin-left: 450px;
}
tr {
border-collapse: collapse;
}
</style>
<script type="text/javascript"> //color change
window.onload=function(){
var trlist=document.getElementsByTagName('tr');
for(var i=0;i<trlist.length;i++){
var mytr=trlist[i];
var oldbgcolor="#6F6";
mytr.onmouseover=function( ){
oldbgcolor=this.style.background;
this.style.background="#FCF";
}
mytr.onmouseout=function(){
this.style.background=oldbgcolor;
}
}
//Get all delete a links on the page
var linklist=document.getElementsByTagName('a');
for(var i=0;i<linklist.length;i++){
//Get the i-th a
var mylink=linklist[i];
//Dynamic binding event
mylink. onclick=function(){
//Parent node.removeChild(the deleted child node)
//this--a
//this.parentNode==td
//this.prentNode.parentNode====tr
var delnode=this.parentNode.parentNode;
var pnode=delnode.parentNode;
pnode.removeChild(delnode);
}
}
var trs=document.getElementsByTagName('tr');
}
//全选或全不选
function checkall(chk){
var ischick=chk.checked;
var list=document.getElementsByName('chkstu');
for (var i = 0; i<list.length;i++) {
var mychk=list[i];
mychk.checked=ischick;
}
}
</script>
</head>
<body>
<table border="1px" width="450px" height="245" >
<tr>
<td><input type="checkbox" onclick="checkall(this)" name="chkstu" />
全选</td>
<td>姓名:</td>
<td>年龄:</td>
<td>性别:</td>
<td><a href="#">del</a></td>
</tr>
<tr>
<td><input type="checkbox" name="chkstu"/></td>
<td>小新</td>
<td>10</td>
<td>男</td>
<td><a href="#">del</a></td>
</tr>
<tr>
<td><input type="checkbox" name="chkstu" /></td>
<td>小李</td>
<td>14</td>
<td>男</td>
<td><a href="#">del</a></td>
</tr>
<tr>
<td><input type="checkbox" name="chkstu" /></td>
<td>小丽</td>
<td>16</td>
<td>女</td>
<td><a href="#">del</a></td>
</tr>
<tr>
<td><input type="checkbox" name="chkstu" /></td>
<td>小虎牙</td>
<td>14</td>
<td>男</td>
<td><a href="#">del</a></td>
</tr>
</table>
<input type="button" value="删除" onclick="delsel()" id="anniu"/>
<script type="text/javascript">
function delsel(){
var chklist=document.getElementsByName('chkstu');
for(var i=chklist.length-1;i>=0;i--){
if(chklist[i].checked==true){//删除
tr=chklist[i].parentNode.parentNode;
pnode=tr.parentNode;
pnode.removeChild(tr);
}
}
}
</script>
</body>
</html>