Question

即时开发Web应用程序，我希望在出现错误或成功时通过ajax返回一些错误消息。

我有ajax脚本工作正常它返回错误或成功然而我的问题是当返回数据我希望它从dom中删除div #webapp_recovery所有在一起不只是隐藏它一旦删除我想要显示＃ webapp_notification

这是通过ajax

提交请求的表单

<div id='webapp_recovery' class='login-container'>
  <div class='page-content'>
    <div class='content'>
        <div class='panel panel-body login-form'>
            <div class='text-center'>
                <div class='icon-object border-slate-300 text-slate-300'><i class='icon-lock2'></i></div>
                <h5 class='content-group'>Reset Password  <small class='display-block'>Reset Your Account Password</small></h5>
            </div>
            <form method='POST' name='webapp_auth_recover'  id='webapp_auth_recover' class='webapp_auth_recover webapp_authentication_val3'>
                <div class='form-group has-feedback has-feedback-left'>
                    <input type='password' id='webapp_auth_password1' name='webapp_auth_password1' class='form-control required' placeholder='New Password' autocomplete='off'>
                        <div class='form-control-feedback'>
                            <i class='icon-lock2 text-muted'></i>
                        </div>
                </div>
                <div class='form-group has-feedback has-feedback-left'>
                    <input type='password'  name='webapp_auth_password2' class='form-control required' placeholder='Confirm Password' autocomplete='off'>
                        <div class='form-control-feedback'>
                            <i class='icon-lock2 text-muted'></i>
                        </div>
                    </div>
                <div class='form-group'>
                    <button type='submit' class='btn btn-primary btn-block'>Update Password <i class='icon-circle-right2 position-right'></i></button>
                </div>
            </form>
        </div>
    </div>
  </div>
</div>

这是我希望显示的错误消息

<div id='webapp_notification' class='login-container'>
<div class='page-content'>
    <div class='content'>
        <div class='panel panel-body login-reset'>
            <div class='text-center'>
                <div class='icon-object border-slate-300 text-slate-300'><i class='icon-warning22'></i></div>
                <h5 class='content-group'>Systems Error <small class='display-block'>Erros have been found</small></h5>
            </div>
            <div class='form-control-static'>
                <p>errors have been detected</p>
            </div>
        </div>                  
    </div>
</div>

我尝试了以下但他们似乎没有工作

$("#webapp_recovery").hide(); //as it says hides the div
$("#webapp_recovery").remove(); //this only removes the single div not all inside

这是可能的，还是有另一种方法可以为消息返回一个新的div并删除旧的

Answer 1

$('#webapp_recovery').remove();

将删除div及其所有子项但是如果您想自己删除所有元素，则可以执行此操作：

$('#webapp_recovery *').remove();
$('#webapp_recovery').remove()

Answer 2

删除应删除元素和内容。这是来自JQ api：＆＃34;当您想要删除元素本身以及其中的所有内容时使用.remove（）。＆＃34;。

如果您的webapp_notification div已存在于DOM中，我将使用以下内容：

$("#webapp_recovery").remove();
$("#webapp_notification").show(); //hide this initially.

否则，如果您要删除旧版本并添加新版本，则可以使用以下内容：

$("#webapp_recovery").after($("#webapp_notification")).remove();

Answer 3

使用

$("#webapp_recovery").children().hide();
$("#webapp_recovery").hide();

将隐藏div及其中的元素。

Answer 4

尝试使用jquery replaceWith函数

这是一个小提琴样本 https://jsfiddle.net/gianoneil/zofm4qx6/

说，你的错误div在页面加载时隐藏，然后这是它的样子

  $('#webapp_recovery').replaceWith(
    $('#webapp_notification').show()
  );

尝试使用jQuery replaceWith，show，＆amp;隐藏功能，你应该能够完成你的任务:)玩得开心

Answer 5

如果父元素id为webapp_recovery：

，则此方法不使用jQuery

var tmp=document.getElementById("webapp_recovery");
tmp.parentNode.removeChild(tmp);

如何从DOM中删除div及其内容

5 个答案: