remove()- 선택한 요소(및 해당 하위 요소)를 제거
empty()- 선택한 요소에서 하위 요소를 제거
1. remove()
- 선택한 요소와 해당 하위 요소를 제거
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Remove remove() 실습하기</h1> <hr> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:paleturquoise;"> 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>Remove div element</button> <script> $(document).ready(function () { $("button").click(function () { $("#div1").remove(); }); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Remove empty() 실습하기</h1> <hr> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:paleturquoise;"> 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>Empty the div element</button> <script> $(document).ready(function () { $("button").click(function () { $("#div1").empty(); }); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style> .test { color: paleturquoise; font-size: 20px; } </style> </head> <body> <h1>Remove remove() 필터링 실습하기</h1> <hr> <p>This is a paragraph.</p> <p class="test">This is another paragraph.</p> <p class="test">This is another paragraph.</p> <button>Remove all p elements with class="test"</button> <script> $(document).ready(function () { $("button").click(function () { $("p").remove(".test"); }); }); </script> </body> </html>
4. remove() <p>가 있는 모든 요소를 제거
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style> .test { color: paleturquoise; font-size: 20px; } .demo { color: green; font-size: 25px; } </style> </head> <body> <h1>Remove remove() <p>가 있는 모든 요소를 제거 실습하기</h1> <hr> <p>This is a paragraph.</p> <p class="test">This is p element with class="test".</p> <p class="test">This is p element with class="test".</p> <p class="demo">This is p element with class="demo".</p> <button>Remove all p elements with class="test" and class="demo"</button> <script> $(document).ready(function () { $("button").click(function () { $("p").remove(".test, .demo"); }); }); </script> </body> </html>
Share article
