[JQUERY] .empty() - 선택한 요소의 내용을 지우는 메서드

2021. 3. 10. 11:10
728x90
 

흐릿한 이미지는 클릭하면 확대 됩니다.

 

.empty()

.empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다.

 
 

태그를 포함한 요소 전체를 제거할 때는 .remove()를 사용합니다.

 

문법

.empty()

예를 들어

<h1>Lorem</h1>

일 때

$( 'h1' ).empty()

를 하면 다음처럼 바뀝니다.

<h1></h1>

<h1></h1>

 

 

예제

버튼을 클릭하면 p 요소의 내용이 지워집니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      p {
        padding: 20px;
        background-color: #eeeeee;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button' ).click( function() {
          $( 'p' ).empty();
        } );
      } );
    </script>
  </head>
  <body>
    <button>Click To Empty</button>
    <p>Lorem Ipsum Dolor</p>
  </body>
</html>

 

 

        아래 사진이 저의 구독버튼입니다 ~  

        눌러주고 가시면 내일 좋은일 생기실꺼에요++! ^∪^

하트 눌러주시면 블로거(>ㅁ<)에게 큰 힘이 됩니다 = ^∪^

출처 : www.codingfactory.net/10272

728x90