javascript - ajax提交后隐藏div

Question

我有一个小问题，涉及我正在提交的 ajax 表单(成功)。

我遵循了教程(http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/)，它提交的表单只是一个标准的联系表单。然而，我的是通过表单发送消息，因此我想向用户显示一条消息，然后让用户能够在单击时删除该消息。

1. 表单发送消息。
2. 用户收到反馈(ajax)
3. 如何在显示此 div 后将其删除？

HTML

<div class="module send-message" id="send-message">
                    <form name="send" class="pure-form pure-form-stacked">
                        <fieldset>

                        <label for="recipient" id="recipient_label">Your recipient(s):</label>
                        <input type="text" name="recipient" id="recipient" class="pure-input-1 input-tags"></input>                     
                        <label class="error" id="recipient_error" for="recipient">This field is required.</label>  

                        <label for="message">Your message:</label>
                        <textarea name="message" maxLength="120" rows="4" class="pure-input-1" id="message"></textarea>
                        <label class="error" for="message" id="message_error">This field is required.</label>  

                        <p id="counter" style="margin-bottom: 25px;"><span>0</span> characters of 120</p>

                        <input type="submit" name="submit" id="submit_btn" class="button btn-large btn-warning" value="Pipit"></input>
                        </fieldset>

                    </form>
                </div>

JS/Jquery:

var dataString = 'recipient='+ recipient + '&message=' + message + '&terms=' + terms;  
    //alert (dataString);return false;  
    $.ajax({  
      type: "POST",  
      url: "process.php",  
      data: dataString,  
      success: function() {  
        $('#send-message').html("<div id='feedback'></div>");  
        $('#feedback').html("<h2>Your message has been sent!</h2>")  
        .append("<p>Click anywhere to hide this message.</p>")  
        .hide()  
        .fadeIn();  
      }  
    });  
    return false;     
  });  
});    

::更新:: 感谢这个出色网站上的许多人，我让它能够工作!

但是，有两个小缺陷:

1. 我希望刷新表单(从中删除所有数据)。
2. 当反馈消息第一次显示时，它会像应该的那样消失。但是，当我重新提交表单时，反馈表单将停留在底部。

任何人都可以帮忙吗？

非常感谢!

Answer 1

这样的东西应该适合你:

更改这行代码:

$('#send-message').html("<div id='feedback'></div>");

至:

$('#send-message').html("<div id='feedback' onclick='hideMe()'></div>");

然后添加:

var hideMe = function () {
    $("#feedback").hide();
}

如果你只是想隐藏它。如果你想完全删除它，那么使用 .remove() 而不是 .hide();

var hideMe = function () {
    $("#feedback").remove();
}