📅 最后修改于: 2023-12-03 15:16:48.543000 🧑 作者: Mango
当使用jQuery在页面上显示警报时，有时我们需要一种方法来删除所有警报。在这里，我们将学习如何使用jQuery删除所有警报。
首先让我们创建一个包含一些基本警报的HTML页面：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 删除所有警报</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>jQuery 删除所有警报</h1>
<p>点击下面的按钮添加一些警报：</p>
<button id="addAlerts">添加警报</button>
<div id="alerts"></div>
<script>
$("#addAlerts").on("click", function() {
$("#alerts").append("<div class='alert'>这是一个警报。</div>");
});
</script>
</body>
</html>
现在让我们编写JavaScript代码以删除所有警报。我们需要使用jQuery的remove()方法来删除所有警报。
$(document).ready(function() {
$("#removeAlerts").on("click", function() {
$(".alert").remove();
});
});
在上面的代码中，我们在页面加载完成后为#removeAlerts按钮添加了一个单击事件处理程序。在单击事件处理程序中，我们使用jQuery的选择器$(".alert")来选择所有具有alert类的HTML元素，并使用remove()方法将它们从DOM中删除。
<!DOCTYPE html>
<html>
<head>
<title>jQuery 删除所有警报</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.alert {
background-color: #f2dede;
color: #a94442;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ebccd1;
}
</style>
</head>
<body>
<h1>jQuery 删除所有警报</h1>
<p>点击下面的按钮添加一些警报：</p>
<button id="addAlerts">添加警报</button>
<button id="removeAlerts">删除所有警报</button>
<div id="alerts"></div>
<script>
$("#addAlerts").on("click", function() {
$("#alerts").append("<div class='alert'>这是一个警报。</div>");
});
$(document).ready(function() {
$("#removeAlerts").on("click", function() {
$(".alert").remove();
});
});
</script>
</body>
</html>
在上面的代码中，我们还添加了一些CSS样式来使警报看起来更好一些。现在您可以单击“添加警报”按钮来添加警报，并单击“删除所有警报”按钮来删除它们。
输出:
点击下面的按钮添加一些警报：
[添加警报]
[删除所有警报]