javascript - JS求大神指教，怎么删除指定的多个子节点，与在同一个元素下创建多个相同的节点？
本文介绍了javascript - JS求大神指教，怎么删除指定的多个子节点，与在同一个元素下创建多个相同的节点？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
求助大神，帮看看怎么才能删除创建的子节点，同时创建节点时怎么在同一个元素下创建多个相同的子元素，并且每个子元素的className都不一样。
我想要的效果是，鼠标移到LI上后，在当前这个LI里面创建几个带有className的DIV，并且鼠标移出LI时，删除刚刚创建的那几个DIV元素。谢谢大神们哈。
下面是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
body,ul,li{
padding: 0px;
margin: 0px;
list-style-type: none;
}
.heidery_menu{
width: 300px;
height: auto;
}
.heidery_menu ul{
padding-top: 10px;
height:400px;
width: 100%;
border: 1px #002299 solid;
color: #fff;
}
.heidery_menu ul li{
height: 35px;
line-height: 35px;
border-bottom:1px #ccc dashed;
background: url(img/jiantuo.png) no-repeat right 10px center;
position: relative;
}
.heidery_menu ul li a{
color: #000;
font-size: 12px;
font-family: "微软雅黑";
text-decoration: none;
margin-left: 10px;
}
.heidery_menu ul li .bottom_xian{
width: 100%;
height: 1px;
background: red;
position: absolute;
bottom: -1px;
z-index: 11;
}
.heidery_menu ul li .top_xian{
width: 100%;
height: 1px;
background: red;
position: absolute;
top:-1px;
}
.heidery_menu ul li .nav{
width: 300px;
height:220px;
background:#fff;
border: 1px solid #FF0000;
position: absolute;
right: -301px;
top:-1px;
}
.heidery_menu ul li .right{
width: 1px;
height:100%;
background: #fff;
position: absolute;
right: -1px;
top:0;
z-index: 10;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('xDov');
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
console.log(oLi);
for(var i=0;i<oLi.length;i++){
//alert("ds");
oLi[i].onmouseover = function(){
//alert("sf");
//这里怎么做才能更方便的创建子元素。
var odiv_1 = document.createElement('div');
odiv_1.className = "top_xian";
var odiv_2 = document.createElement('div');
odiv_2.className = "bottom_xian";
var odiv_3 = document.createElement('div');
odiv_3.className = "right";
var odiv_4 = document.createElement('div');
odiv_4.className = "nav";
this.appendChild(odiv_2);
this.appendChild(odiv_1);
this.appendChild(odiv_3);
this.appendChild(odiv_4);
};
oLi[i].onmouseout = function(){
//这里怎么做才能删除，上面鼠标移上时就天的几个DIV元素。
}
}
}
</script>
</head>
<body>
<div class="heidery_menu" id="xDov">
<div>全部商品</div>
<ul>
<li>
<a href="" >上衣</a>
<a href="" >大衣</a>
<a href="" >针织衣</a>
<a href="" >套装</a>
<a href="" >内衣</a>
</li>
<li>男士服装</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
解决方案
https://jsfiddle.net/vzhv2gtt/
因为你的 li 里本来就没有东西，删除所有子节点就好，直接用 innerHTML = "" 就能删除。当然删除子节点的方法还很多，你可以看看
如果想方便的创建子节点，可以写个函数来解决，比如
function createDiv(className) {
var div = document.createElement("div");
if (className) {
div.className = className;
}
return div;
}
// ....
// 这里调用
parent.appendChild(createDiv("top_xian"));如果你只想删除创建的几个 DIV(尤其是原本LI内不为空的时候)，可以用闭包把创建的 div 先保存下来
https://jsfiddle.net/vzhv2gtt/1/
function setup(parent) {
var divs = [
createDiv("top_xian"),
createDiv("bottom_xian"),
createDiv("right"),
createDiv("nav")
];
parent.onmouseover = function() {
divs.forEach(function(child) {
parent.appendChild(child);
});
};
parent.onmouseout = function() {
divs.forEach(function(child) {
parent.removeChild(child);
});
};
}
for (var i = 0; i < oLi.length; i++) {
setup(oLi[i]);
}这篇关于javascript - JS求大神指教，怎么删除指定的多个子节点，与在同一个元素下创建多个相同的节点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
