本文介绍如何使用jQuery库中的方法来删除网页上的DOM元素。包括删除特定ID的元素、清空某个DIV的所有子元素以及移除具有特定类的子元素。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
//删除ID为p1的元素
$("#but1").click(function(){
$("#p1").remove();
});
//删除DIV的子元素
$("#but2").click(function(){
$("#div1").empty();
});
//删除DIV中的指定子元素
$("#but3").click(function(){
//这里是P标签而不是DIV标签
$("p").remove(".another");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p> <button id="but1">删除元素p</button><br>
<div style="width: 200px;height: 100px;color: red;background-color: lime; border: 1px;" id="div1">
<p>This is a paragraph.</p>
<p>This is another paragraph in the div.</p>
</div>
<button id="but2">删除div子元素</button><br>
<div style="width: 200px;height: 100px;color: green;background-color: orange;" id="div2">
<p>This is a paragraph.</p>
<p class="another">This is another paragraph in the div.</p>
</div>
<button id="but3">删除div中指定子元素</button><br><br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
//删除ID为p1的元素
$("#but1").click(function(){
$("#p1").remove();
});
//删除DIV的子元素
$("#but2").click(function(){
$("#div1").empty();
});
//删除DIV中的指定子元素
$("#but3").click(function(){
//这里是P标签而不是DIV标签
$("p").remove(".another");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p> <button id="but1">删除元素p</button><br>
<div style="width: 200px;height: 100px;color: red;background-color: lime; border: 1px;" id="div1">
<p>This is a paragraph.</p>
<p>This is another paragraph in the div.</p>
</div>
<button id="but2">删除div子元素</button><br>
<div style="width: 200px;height: 100px;color: green;background-color: orange;" id="div2">
<p>This is a paragraph.</p>
<p class="another">This is another paragraph in the div.</p>
</div>
<button id="but3">删除div中指定子元素</button><br><br>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
