jquery는 element_jquery 이후의 모든 요소를 ​​삭제하는 기능을 구현합니다.

이 글의 예시에서는 요소 뒤에 있는 모든 요소를 ​​삭제하는 jquery 기능의 자세한 구현 과정을 공유합니다. 구체적인 구현 내용은 다음과 같습니다

실현 효과:

항목 선택

삭제 버튼을 클릭하면 선택한 항목 이후의 모든 형제 요소가 삭제됩니다

jQuery 탐색의 nextAll() 메서드는 DOM 트리의 요소 뒤에 있는 형제 요소, 즉 요소 뒤의 모든 형제 요소를 검색할 수 있으므로 삭제() 메서드를 사용할 수 있으므로 연결은 다음과 같습니다. $(selector).nextAll().remove();
아래에 예시 데모가 나와 있습니다. 버튼을 클릭한 후 선택한 항목 뒤의 모든 옵션을 삭제하세요
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>

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;}

jquery 코드 작성

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

위 내용은 에디터가 여러분을 위해 준비한 지식 포인트입니다.