jquery로 요소 내용을 제거하는 방법-JS 튜토리얼-php.cn

jquery로 요소 내용을 제거하는 방법

WBOY

풀어 주다： 2021-11-24 15:28:34

원래의

2476명이 탐색했습니다.

방법: 1. children() 및 제거() 메소드를 사용하여 지정된 요소의 내용을 삭제합니다. 구문은 "$(element).children().remove();"입니다. ) 메소드를 사용하여 지정된 요소의 컨텐츠를 삭제합니다. 구문은 "$(element).empty();"입니다.

jquery로 요소 내용을 제거하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 1.10.0, Dell G3 컴퓨터.

jquery로 요소 콘텐츠를 제거하는 방법

jquery에서는 태그 내 콘텐츠 태그의 일부에 대해 id 속성을 설정하고 ID를 통해 콘텐츠 개체의 일부를 얻을 수 있습니다.

요소와 콘텐츠를 삭제해야 하는 경우 일반적으로 다음 두 가지 jQuery 메서드를 사용할 수 있습니다.

remove() - 선택한 요소(및 해당 하위 요소) 삭제
empty() - 삭제 위치 선택한 요소 하위 요소

예제를 통해 이 두 메서드의 사용을 살펴보겠습니다.

1 선택한 요소의 모든 직접 하위 요소를 반환하려면 children() 메서드를 사용하세요. , 그런 다음 jQuery Remove() 메소드를 사용하여 선택한 요소와 해당 하위 요소를 삭제합니다.

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").children().remove();
  });
});
</script>
</head>

<body>

<div id="div1" style="height:120px;width:300px;border:1px solid black;background-color:yellow;">
<p>This is some text in the div.</p>
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>

<br>
<button>删除 div 元素</button>

</body>
</html>

로그인 후 복사

출력 결과:

jquery로 요소 내용을 제거하는 방법

2. jQueryempty() 메소드는 선택한 요소의 하위 요소를 삭제합니다.

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>清空 div 元素</button>
</body>
</html>

로그인 후 복사

출력 결과:

jquery로 요소 내용을 제거하는 방법