在JQ中的,要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现。可仔细观察效果的话就可以发现。
empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置。
remove([expr])则是把其从dom中删除,而不会保留其所占的位置。例:
<p>Hello</p>
World
<p class='wel'>welcome</p>
执行$("p").empty()其结果是
<p></p>
World
<p></p>
执行$("p").remove()其结果是
World
执行$("p").remove(".wel")其结果是
<p>Hello</p>
World
<p>Hello</p>
World
在JS中实现移除某一元素时
1、remove()方法是将某一元素在DOM中移除
<p>Hello</p>
Worl d
Worl d
var p = document.getElementsByTagName('p')[0];
执行p.remove()其结果是
World
2、还可以是删除下拉菜单中选择的某一项
<html>
<head>
<script type="text/javascript">
function removeOption(){
var x=document.getElementById("mySelect");
<head>
<script type="text/javascript">
function removeOption(){
var x=document.getElementById("mySelect");
//selectIndex:是select标签的一个属性,获取目前选取的那个option的下标(下标从0开始),所以remove()方法里面的参数也可以直接写需要删除的option的下标
x.remove(x.selectedIndex);
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" οnclick="removeOption()" value="删除被选的选项">
</form>
</body>
</html>
x.remove(x.selectedIndex);
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" οnclick="removeOption()" value="删除被选的选项">
</form>
</body>
</html>