Question

怎么用jQuery实现点击按钮后删除某个元素？

Answer 1

点击按钮后删除某个元素可用如下jQuery代码实现

$("input:button").click(function() {
    $(selector).remove(); // $(selector)通过选择器表示要删除的元素，remove()函数用以删除元素
});

实例演示：点击按钮后删除复选框勾选的元素

1. 创建Html元素

   <div class="box">
   	勾选元素后，点击按钮删除<br>
   	<div class="content">
   		<input type="checkbox" name="item"><span>萝卜</span>
   		<input type="checkbox" name="item"><span>青菜</span>
   		<input type="checkbox" name="item"><span>小葱</span><br>
   		<input type="checkbox" name="item"><span>豆腐</span>
   		<input type="checkbox" name="item"><span>土豆</span>
   		<input type="checkbox" name="item"><span>茄子</span>
   	</div>		
   	<input type="button" value="删除">
   </div>

2. 设置css样式

   div.box{width:300px;height:200px;padding:10px 20px;border:4px dashed #ccc;}
   div.content{width:250px;height:80px;margin:10px 0;}
   input{margin:10px;}
   input[type='button']{width:200px;height:35px;margin:10px;border:2px solid #ebbcbe;}

3. 编写jquery代码

   $(function(){
   	$("input:button").click(function() {
   		$("input:checkbox:checked").each(function() {
   			$(this).next("span").remove();
   			$(this).remove();
   		});
   	});
   })

4. 观察效果

• 选择待删除的项目

  

• 点击按钮删除后结果

  

Answer 2

$('#button').click(function(){
$('#element').remove();
});