jQuery에는 다른 요소 내부의 자식 요소만 제거하는 기능이 있습니다. “empty()” 메서드는 객체에서 직접 사용할 수 있습니다.
아래 HTML 코드를 고려하십시오.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor sit amet</title>
5</head>
6<body>
7 <div id="myDiv">
8 <p>First paragraph</p>
9 <p>Second paragraph</p>
10 <p>Third paragraph</p>
11 <p>Fourth paragraph</p>
12 </div>
13 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
14</body>
15</html>
“myDiv” 요소 내의 모든 단락을 제거하려면 jQuery에서 다음 코드를 사용하면 됩니다.
1$("#myDiv").empty();
그러나 JavaScript만 사용하여 이 동일한 작업을 어떻게 수행할 수 있습니까?
JavaScript를 사용하여 DOM 노드에서 자식 요소 제거
JavaScript를 사용하면 프로그래머가 다양한 속성을 통해 DOM 노드에서 요소를 제거할 수 있습니다. 각각을 사용하여 이 제거를 수행하는 방법을 알아보겠습니다.
innerHTML
이러한 속성 중 하나는 “innerHTML"입니다. 요소의 모든 내부 HTML을 대체할 수 있습니다. 빈 문자열로 대체되는 것을 포함하여 해당 요소를 비어 있게 만듭니다.
“myDiv” 요소 내의 모든 자식 노드를 제거하려면 다음 JavaScript를 사용하십시오.
1document.getElementById("myDiv").innerHTML = "";
아래에서 HTML의 전체 예를 볼 수 있습니다. 여기에서는 버튼을 사용하여 요소를 제거합니다.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Removing HTML elements using innerHTML</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv" style="border: 3px dashed red; margin-bottom: 20px;">
9 <p>First paragraph</p>
10 <p>Second paragraph</p>
11 <p>Third paragraph</p>
12 <p>Fourth paragraph</p>
13 </div>
14
15 <button id='removeElements'>Remove paragraphs (innerHTML)</button>
16
17 <script>
18 const button = document.getElementById("removeElements");
19 button.onclick = function () {
20 document.getElementById("myDiv").innerHTML = "";
21 };
22 </script>
23</body>
24</html>
textContent
“textContent” 속성은 노드 내부의 모든 요소를 빈 문자열로 바꾸는 데 사용할 수 있습니다.
브라우저에 따라 “textContent"를 사용하는 것이 “innerHTML"보다 성능이 더 좋을 수 있습니다.
1document.getElementById("myDiv").textContent = "";
루프를 사용하여 자식 요소 제거(“lastChild”)
아래 예에서 “while” 루프를 사용하여 요소에 첫 번째 자식이 포함되어 있는지 확인합니다. true이면 부모 요소 내부에 하나 이상의 자식 요소가 있음을 나타내므로 루프는 마지막 요소를 제거합니다. 그리고 그 과정이 반복됩니다.
“lastChild” 속성을 사용하여 마지막 요소를 제거하는 것이 “firstChild” 속성을 사용하여 첫 번째 요소를 제거하는 것보다 일반적으로 더 나은 성능을 보입니다.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastChild);
4}
루프를 사용하여 자식 요소 제거(“lastElementChild”)
여기서 우리는 동일한 결과를 얻을 수 있지만 텍스트 노드 “#text” 및 주석 “<!– comments –>“와 같은 “비 요소"를 유지합니다.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastElementChild);
4}
“lastElementChild"의 또 다른 기능은 직계 자손이 아닌 부모 요소 내의 자식 노드를 보존하는 것입니다.
예를 들어, 아래 요소의 구조를 고려하십시오.
1Parent element
2|
3 — First node
4| |
5| — Node 1
6| |
7| — Node 2
8|
9 — Second node
“lastElementChild"를 사용할 때 “First node"와 “Second node"가 제거됩니다. “Node 1” 및 “Node 2"는 제거되지 않습니다.
“remove” 메소드로 자식 요소 제거
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.lastChild.remove();
4}
“remove” 기능이 ES5에 추가되었습니다. 더 간단하고 직접적인 연결 구문이 있습니다. 이미 많은 브라우저에서 뛰어난 지원을 제공합니다 .
“replaceChildren” 메소드로 요소 제거
“replaceChildren” API를 사용하여 DOM 노드에서 자식 요소를 제거할 수도 있습니다. 이 방법을 사용하면 부모 요소 내에서 요소를 제거할 수 있을 뿐만 아니라 한 번의 작업으로 다른 요소로 대체할 수 있습니다.
하위 요소만 제거하려면 인수 없이 API를 호출하십시오.
1const element = document.getElementById("myDiv");
2element.replaceChildren();
“replaceChildren” API는 이미 최신 브라우저에서 잘 지원됩니다 .