javascript - 在 JavaScript 提交操作期间从 DOM 中删除 HTML 表单

Question

基本上就是上面写的那样。我有一个生成 JavaScript 操作的表单:

// in head
function process() {
    setupform = document.getElementById("setup");
    setupform.parentNode.removeChild(setupform);
    // do other stuff
}

// in body
<form id="setup" name="setup">
    <input id="entrybox" name="entry" type="text">
    <button type="submit" onclick="process()">Process</button>
</form>

当表单被触发时，页面会重新加载而不是继续“其他内容”并将表单留空。错误控制台中没有出现错误。

我有另一个版本，它不是从 DOM 中删除表单，而是有 setupform.innerHTML = ""; 并且工作正常。但是，留下一个空元素似乎是错误的。我只是想弄清楚为什么上面的代码不起作用。

在有人建议之前，我也不想使用 JQuery 或任何其他框架。

Answer 1

您必须阻止表单提交。这会触发您正在谈论的页面刷新。

<form id="setup" name="setup" onsubmit="return false;">
  <input id="entrybox" name="entry" type="text">
  <button type="submit" onclick="process()">Process</button>
</form>

@boulder_02 评论也对!