jQuery移除指定元素後的全部元素

jQuery 遍歷的nextAll() 方法能夠搜索 DOM 樹中的元素跟隨的同胞元素，也就是一個元素後面的全部同級元素，刪除能夠使用方法remove()，因此連起來爲

$(selector).nextAll(「條件」).remove();

下面給出實例演示：點擊按鈕後，刪除被選項目以後的全部選項

1. 建立Html元素

   <div class="box">
   	<span>點擊按鈕後，刪除被選項目以後的全部選項。</span><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><br>
   	</div>		
   	<input type="button" value="刪除">
   </div>

2. 簡單設置一下css樣式

   div.box{width:300px;height:200px;padding:10px 20px;border:4px dashed #ccc;}
   div.box>span{color:#999;font-style:italic;}
   div.content{width:250px;height:100px;margin:10px 0;border:1px solid green;}
   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").next().nextAll().remove();
   	});
   })

4. 觀察顯示效果

• 選擇項目

• 點擊刪除按鈕，被選項以後的全部同級元素都被刪除