Question

<!DOCTYPE html>
<html>
    <head>
    </head>
    <script>    
        function removeP2() {
            var parent = document.getElementById("section");
            var child = document.getElementById("p2");
            parent.removeChild(child);
        }
    </script>
    <body>
        <nav>
            <form>
               <button onclick="removeP2();">Remove</button> 
            </form>
        </nav>
        <section id="section">
            <p id="p1">Paragraph One.</p>
            <p id="p2">Paragraph Two.</p>
        </section>
    </body>
</html>

当我单击提交按钮时，该函数照常执行，但在函数执行后，页面重新加载（删除P2一秒钟）。

我找到了一个解决方案，即删除＆＃34; Form＆＃34;在＆＃34; nav＆＃34;内标签，它工作正常。只是想问问题是什么原因，如果我需要有＆＃34; Form＆＃34;标签内的＆＃34; nav＆＃34;标签，我需要解决的部分？

Answer 1

表单已提交，您的页面已重新加载。您需要停止表单提交。

解决方案1：在按钮中添加type属性。

<button type="button" onclick="removeP2();">Remove</button>

这将确保该按钮不是submit类型（这是未指定类型时表单标签内按钮的默认类型），并且单击时不提交表单。

解决方案2：在javascript中阻止提交事件。所以做出这些改变。

<button onclick="removeP2(event);">Remove</button>

并在脚本中阻止此事件

 function removeP2(event) {
   event.preventDefault(); // prevent the event , ie form submit event
   var parent = document.getElementById("section");
   var child = document.getElementById("p2");
   parent.removeChild(child);
 }

解决方案3：我在HTML中看不到表格标签的任何需要。如果它是您的确切语法，并且您在表单提交中确实没有任何其他元素或目的，那么您可以删除form标记。

 <nav>
   <button onclick="removeP2();">Remove</button>         
 </nav>

Answer 2

使用以下代码。它不会提交表格。

<button type="button">My Button</button>

Answer 3

请参阅此代码：

https://jsfiddle.net/y7mhu3oL/1/

解决方案是在表单标签中提交：

<script>    
    function removeP2() {
        document.getElementById("p2").remove();
        }   
    </script>
<body>
    <nav>
        <form method="POST" onsubmit="removeP2(); return false;">
           <button>Remove</button> 
        </form>
    </nav>
    <section id="section">
        <p id="p1">Paragraph One.</p>
        <p id="p2">Paragraph Two.</p>
    </section>
</body>

Answer 4

event.preventDefault（）是正确的答案。当您按下表单内的按钮时，它将自动提交该表单，除非您使用event.preventDefault阻止默认操作;

function removeP2(event) {
    event.preventDefault()
    var parent = document.getElementById("section");
    var child = document.getElementById("p2");
    parent.removeChild(child);
}

Answer 5

由于您没有定义按钮type，因此您的浏览器假定按钮为type="submit"并尝试提交＆＃34;表格（即使你没有定义任何方法或行动）。

如果您将type="button"添加到按钮标记，则会覆盖submit的默认假设，并且不会尝试提交表单。

jsfiddle：https://jsfiddle.net/hdpk8c3n/

Answer 6

将type="button"添加到您的按钮标签中。在表单标签中，按钮的默认类型为Submit。这就是为什么当您单击按钮时，将提交表单并重新加载页面。

onClick事件不在表单标记内工作

6 个答案: