Question

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

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

Answer 1

这样就可以标记为已回答。

JSFiddle：http://jsfiddle.net/fducqxqx/

HTML

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

的jQuery

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

Answer 2

即使您使用$("form").remove();原因，您的表单“已恢复” 您的网页正在刷新。
为避免这种情况，您应该使用AJAX将表单提交到表单处理服务器脚本，并阻止默认表单event触发：

$("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
        }
    });
});

http://api.jquery.com/jquery.ajax/
http://api.jquery.com/event.preventdefault/

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

2 个答案: