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
