JS 如何删除当前节点内容

JavaScript05

JS 如何删除当前节点内容,第1张

需要准备的材料分别是:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建一个html文件,例如:index.html。

2、在index.html的<script>标签中,输入js代码:document.body.removeChild(document.getElementById("1"))。

3、浏览器运行index.html页面,此时会发现123所在的整个div以及它的内容都被移除了。

首先要取到A元素 你通过class 如果用原生JS 需要封一个函数来取

因为这里只有1个A 所以可以用

var oDiv=document.getElementById('one')

var oA=oDiv.getElementsByTagName('a')[0]

var aDiv=oDiv.getElementsByTagName('div')[0]

在DOM树里 把第一个class为fl 的DIV 删了

oA.onclick=function(){

oDiv.removeChild(aDiv)

}

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>delNode</title>

<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<ul>父节点A

<li>aaaaa</li>

<li>bbbbbb</li>

</ul>

<ul>父节点B

<li>dddd</li>

<li>eeeee</li>

</ul>

<ul>父节点C

<li>ffffff</li>

<li>ggggggg</li>

</ul>

<ul>父节点D

<li>bsdfdsfsf</li>

<li>eeedeeeee</li>

</ul>

<script type="text/javascript">

$(function() {

$("ul li").bind("click", function() {

alert("将清除:" + $(this).text() + " 的父节点,\n同时其下所有子节点也将清除!")

//$(this).parent().remove()//也可以

$(this).parent().empty()

})

})

</script>

</body>

</html>