jQuery delete DOM node
Link to the original text of this article: https://blog.csdn.net/xzk9381/article/details/113372601
One, empty() method
Use the empty() method to delete all child elements within the specified element:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('#div1').empty();
})
</script>
</head>
<body>
<div id="div1">
<span>测试</span>
<div>测试</div>
<input type="button" value="测试">
</div>
</body>
</html>
Two, remove() method
The remove() method is the same as the empty() method, both of which are used to remove elements. But the remove method will remove the element itself, and also remove all the data inside the element, including bound events and jQuery data related to the element. At the same time, you can also use parameters to filter the content to be deleted. This parameter can be a selector in jQuery.
1. Remove all elements
For example, delete all elements whose class is div1:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('.div1').remove()
})
</script>
</head>
<body>
<div class="div1">测试1</div>
<div class="div1">测试2
<span>span 标签</span>
</div>
<div class="div1">测试3</div>
<div class="div1">测试4</div>
<div class="div1">测试5</div>
</body>
</html>
2. Delete the specified element in the element set
For example, delete the element whose index value is equal to 2 in the element collection:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('.div1').remove(':eq(2)');
})
</script>
</head>
<body>
<div class="div1">测试1</div>
<div class="div1">测试2
<span>span 标签</span>
</div>
<div class="div1">测试3</div>
<div class="div1">测试4</div>
<div class="div1">测试5</div>
</body>
</html>
Delete the element containing the content "Test 4" in the element set:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('.div1').remove(':contains("测试4")');
})
</script>
</head>
<body>
<div class="div1">测试1</div>
<div class="div1">测试2
<span>span 标签</span>
</div>
<div class="div1">测试3</div>
<div class="div1">测试4</div>
<div class="div1">测试5</div>
</body>
</html>
It should be noted that if only the .div1 selector is used, the child element span cannot be deleted. If you want to delete the span tag, the selector can use $('.div1 span').
Three, detach() method
The effect of the detach() method is the same as that of the remove() method, and it also supports passing parameters. But detach() will keep the deleted object in memory, which means that after deleting the element, you can continue to operate on the element in memory.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('div').click(function (){
console.log($(this).html());
})
$('#btn1').click(function(){
$.data(div1,'type','detach');
var mydiv = $('#div1').detach();
$('body').append(mydiv);
console.log($.data(div1));
})
$('#btn2').click(function(){
$.data(div2,'type','remove');
var mydiv = $('#div2').remove();
$('body').append(mydiv);
console.log($.data(div2));
})
})
</script>
</head>
<body>
<div id="div1" style="width: 100px;height: 20px;background: #ccc;margin-top: 20px;">detach 测试</div>
<div id="div2" style="width: 100px;height: 20px;background: orange;margin-top: 20px;">remove 测试</div>
<input type="button" value="detach 删除" id="btn1" style="margin-top: 20px;">
<input type="button" value="input 删除" id="btn2" style="margin-top: 20px;">
</body>
</html>
Running the above code can see that the elements deleted by the two methods can be stored in memory through variables. The difference is that elements deleted using the detach method can retain events and data when they are reinserted, while elements deleted by the remove method will not retain events and data.
Link to the original text of this article: https://blog.csdn.net/xzk9381/article/details/113372601