본문 바로가기
Frontend/JQuery

[jQuery] remove(), empty() 메서드

by hyeok1235 2023. 9. 22.

jQuery의 remove() 메서드는 선택한 요소를 웹 페이지에서 삭제합니다. empty() 메서드는 삭제한다는 점에서 유사하지만, 선택된 요소의 내용/자식 요소만 삭제한다는 차이가 있습니다. 

 

다음 코드는 remove() 메서드와 empty() 메서드가 사용된 코드입니다. 

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script>
    $(document).ready(function() {
       $('.box1').remove();			// Remove all elements with class box1
       $('.box2 #ccc').empty();		// Remove all elements with class box1 & id ccc
     });
  </script>
</head>
<body>
  <div class="box1">
    <div id="aaa">111</div>
    <div id="bbb">222</div>
  </div>
  <div class="box2">
    <div id="ccc">333</div>
    <div id="ddd">444</div>
  </div>
</body>

 

이 HTML 코드는 삭제되는 요소를 제외한 다음 코드와 같은 결과를 만듭니다. 

<div class="box2">
  <div id="ddd">444</div>
 </div>

 

 

728x90
반응형