如何使用JavaScript添加/删除隐藏在<p hidden>中的内容_如何使用JavaScript或Cheerio从字符串中删除空的<p>标记？_如何使用javascript在费用跟踪应用程序中动态添加和删除表格中的项目？ - 腾讯云开发者社区

基础概念

<p hidden> 是 HTML5 中的一个属性，用于隐藏元素。当 hidden 属性被设置时，元素不会被渲染在页面上，但仍然存在于 DOM（文档对象模型）中。

类型

静态隐藏：通过 HTML 直接设置 hidden 属性。
动态隐藏：通过 JavaScript 动态添加或移除 hidden 属性。

应用场景

条件渲染：根据某些条件（如用户权限、数据状态等）动态显示或隐藏内容。
模态框：在显示模态框时隐藏其他内容。

示例代码

添加隐藏内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Hidden Content</title>
</head>
<body>
    <button id="toggleButton">Toggle Content</button>
    <p id="hiddenContent" hidden>This content is hidden.</p>

    <script>
        document.getElementById('toggleButton').addEventListener('click', function() {
            var content = document.getElementById('hiddenContent');
            if (content.hasAttribute('hidden')) {
                content.removeAttribute('hidden');
            } else {
                content.setAttribute('hidden', '');
            }
        });
    </script>
</body>
</html>

删除隐藏内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Hidden Content</title>
</head>
<body>
    <button id="toggleButton">Toggle Content</button>
    <p id="hiddenContent" hidden>This content is hidden.</p>

    <script>
        document.getElementById('toggleButton').addEventListener('click', function() {
            var content = document.getElementById('hiddenContent');
            content.removeAttribute('hidden');
        });
    </script>
</body>
</html>