Question

jquery如何删除子元素

<div>
<span></span>
<span></span>
<span></span>
</div>
如何删除div下的span元素，除了第一个span，谢谢！

Answer 1

1、删除元素和内容，可以通过jquery的remove()和empty()方法，remove()删除选择的元素和子元素，empty()只删除选中元素的子元素。

2、新建一个html页面，引入jquery.js，页面body里面添加一个div盒子，div盒子里面添加两段话，和一个删除div元素的按钮，js中调用$（“#div1”）.remove()方法删除元素。

3、在浏览器中打开html页面之后，可以看到div盒子和两段话，点击移除div元素按钮。

4、点击移除div元素按钮之后，可以看到div元素和子元素p都被删除掉了。

5、将$（“#div1”）.remove()方法注释掉，使用$（“#div1”）.empty()方法，删除选择元素的子元素。

6、可以看到点击清空div元素按钮，将div元素的p子元素删除了。

Answer 2

jquery中children()可以选择子元素，remove()可以删除元素，所以可用如下代码删除子元素

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

示例如下：

1. 创建Html元素

   <div class="top">
   	<div>
   		<li>list 1-1</li>
   		<li>list 1-2</li>
   		<li>list 1-3</li>
   	</div>
   	<div>
   		<li>list 2-1</li>
   		<li>list 2-2</li>
   		<li>list 2-3</li>
   	</div>
   </div>

2. 设置css样式
   

   div{padding:10px 20px;margin:10px;}
   div.top{width:500px;height:200px;border:4px solid #33cc33;}
   div.top div{min-height:60px;border:4px solid #ccc;}

3. 编写jquery代码

   $(function(){
   	$("div.top div").click(function() {
   		$(this).children('li').remove();  // 删除div下的子元素li
   	});
   })

4. 显示效果

• 删除子元素前

  

• 点击后删除相应子元素

  

Answer 3

$("div span:gt(0)").remove();

1. 使用了楼上哥们的，我在这里说明一下
   

2. gt是大于的意思，0其实代表的就是1
   

3. remove从字眼上看就知道是去除的意思了。

Answer 4

$("div").find("span"）[0].remove();

试试行不行

Answer 5

$("div span:gt(0)").remove()