JQuery清空DIV内容的方法、示例代码及解答帮助大全

频道：问答 日期： 浏览：4

jQuery 是一个广泛使用的 JavaScript 库，可简化前端开发任务，提供了许多方便的函数和方法，可轻松处理 DOM 操作、事件处理、动画效果等。以下为你介绍清空 DIV 内容的方法、示例代码：

使用 empty() 函数

empty() 函数会删除选定元素的所有子元素，包括文本和 HTML 标记。示例代码如下：

$("yourDivId").empty();

在上述代码中，"yourDivId" 是要清空的 div 元素的 ID。通过调用 empty() 函数，div 中的所有内容将被删除。

JQuery清空DIV内容的方法、示例代码及解答帮助大全

清空 div 内所有控件值

要清空 div 内的所有控件值，可使用 jQuery 的 .val() 方法。.val() 方法用于获取或设置表单元素的值，当将其设置为一个空字符串时，就可以清空控件的值。示例代码如下：

$('myDiv input, myDiv select, myDiv textarea').val('');

这段代码选择了 myDiv 内的 input、select 和 textarea 元素，并将它们的值设置为一个空字符串。

清空指定 div 下所有 input 值

要清空指定 div 下所有 input 值，首先需要找到这个 div，然后遍历其中的 input 元素，将其值设置为空。示例代码如下：

JQuery清空DIV内容的方法、示例代码及解答帮助大全

$(document).ready(function(){
    $("clearBtn").click(function(){
        $("targetDiv input").each(function(){
            $(this).val("");
        });
    });
});

在上述代码中，通过 jQuery 的 each 方法遍历了指定 div 下所有的 input 元素，并将其值设置为空。当点击 id 为 clearBtn 的按钮时，就会执行清空操作。

完整示例（使用 empty() 函数）

以下是一个完整的 HTML 示例，展示了如何使用 jQuery 的 empty() 函数清空 div 内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 清空 div 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="myDiv">
        <p>这是一些示例内容。</p>
        <span>更多内容。</span>
    </div>
    <button id="clearDiv">清空 div</button>
    <script>
        $(document).ready(function(){
            $("clearDiv").click(function(){
                $("myDiv").empty();
                console.log('div 内容已清空！');
            });
        });
    </script>
</body>
</html>

在这个示例中，当点击“清空 div”按钮时，id 为 myDiv 的 div 内的所有内容将被清空，并且会在控制台打印一条信息。

JQuery清空DIV内容的方法、示例代码及解答帮助大全