Question

jquery 如何删除孩子节点

Answer 1

jquery可以使用如下代码删除孩子节点

$(object).children(selector).remove();  // 删除object元素下满足selector选择器的子元素，不填写则默认删除所有子元素

1. 创建Html元素及css样式

   <div id="top"> 
   	<div>
   		这是孙辈元素
   		<li>孙代的li-1</li>
   		<li>孙代的li-2</li>
   		<li>孙代的li-3</li>
   	</div>
   	<span>子代的span</span>
   	<li>子代的li-1</li>
   	<li>子代的li-2</li>
   	<li>子代的li-3</li>	
   </div>
   <input type="button" value="点我删除子代的li" name="btn1">
   <input type="button" value="点我删除子代所有元素" name="btn2">

   div{padding:10px 20px;margin:5px 0;border:4px solid #ebcbbe;}
   div#top{width:250px;height:250px;}
   li{margin:10px 0;}

2. jquery代码
   

   $(function(){
   	$("input[name='btn1']").click(function() {
   		$("#top").children('li').remove();
   	});
   	$("input[name='btn2']").click(function() {
   		$("#top").children().remove();
   	});
   })

3. 查看效果

   

• 删除子代的li的效果

  

• 删除子代所有元素的效果

  

Answer 2

$('#id').children().remove();删除该元素下的所有子节点。如果要删除某一个子节点，就用选择器选择到那个节点再删除