HTML 点击按钮删除或显示元素

第一种，隐藏，即不可见。元素仍然存在，所以结构不会改变。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function removeElement()
        {
            if (document.getElementById("p1").style.visibility=="visible")
            {
                document.getElementById("p1").style.visibility="hidden";
            }
            else {
                document.getElementById("p1").style.visibility="visible";
            }
        }
    </script>
</head>
<body>

<h1>Hello</h1>

<p id="p1" style="visibility: hidden;">This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.</p>

<input type="button" onclick="removeElement()"
       value="Do not display paragraph" />

</body>
</html>

第二种,元素不显示，可能改变结构。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function removeElement()
        {
            if(document.getElementById("p1").style.display=="none")
            document.getElementById("p1").style.display="inherit";
            else
                document.getElementById("p1").style.display="none";
        }
    </script>
</head>
<body>

<h1>Hello</h1>

<p id="p1">This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.</p>

<input type="button" onclick="removeElement()"
       value="Do not display paragraph" />

</body>
</html>

HTML 点击按钮 删除或显示元素

推荐阅读更多精彩内容

HTML 点击按钮删除或显示元素