Javascript 提交后如何从页面中删除表单？

我希望在用户单击submit按钮后将表单字段从页面中删除，但是我可以看到表单字段被短暂删除，然后立即恢复。我不知道为什么会这样，如果有人能向我解释，我将不胜感激

$("form").on("submit",function () {
    $("form").remove();
});

即使使用$form.remove，也会恢复您的表单；原因 正在刷新您的页面。 为避免使用AJAX将表单提交到表单处理服务器脚本并防止触发默认表单事件，请执行以下操作：

$("form").on("submit", function( event ) {
    event.preventDefault();
    var data = $(this).serialize();
    $.ajax({
        url: "mail.php",
        type: "post",
        data: data,
        success : function( response ){
            // hide form or do something with response
        }
    });
});

---

只需将其标记为已回答即可

JSFiddle：

HTML

---

请发布一个完整的代码示例。表单是否只是发回页面并重新加载？您没有提供足够的信息。表单将被提交，页面将被刷新。使用return false或event.prevenrDefault并通过Ajax提交表单，然后只更改visible属性。如果将表单提交到同一页面，则只需重新加载页面，表单将再次可见。您可以使用event.preventDefualt不提交表单并将其删除。实例请发布完整的代码，如@j08691所说。您可以通过将表单的显示属性从：$form.css'display'、'block'；到$form.css'display'，'none'；

<form action="#" method="POST" class="form">
    <input type="text" placeholder="Some Data Input" />
    <input type="submit" value="Send" />
</form>

$("form").on("submit",function (e) {
    e.preventDefault(); //To not refresh the page
    $("form").remove(); //Remove the form
});