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

【问题标题】：How can i remove a div and its contents from the DOM如何从 DOM 中删除 div 及其内容
【发布时间】：2016-03-25 02:35:06
【问题描述】：

我正在开发一个 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 并删除旧的

【问题讨论】：

请详细说明“它们似乎不起作用”是什么意思？你怎么称呼那个代码？您检查过控制台是否有错误？
可以创建一个jsfiddlejsfiddle.net来演示吗？
在尝试了下面的一些解决方案之后，它似乎可以工作并从他们的 dom 中删除所有内容。
Remove all child elements of a DOM node in JavaScript的可能重复

标签： javascript jquery html css ajax

【解决方案1】：

试试jquery的replaceWith函数

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

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

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

尝试使用 jQuery 的替换、显示和隐藏函数，你应该能够完成你的任务 :) 玩得开心

【讨论】：

先生，我认为.show() 会比使用.css('display','block') 更有效率。
是的，其实我忘记用了，谢谢提醒

【解决方案2】：

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

将删除 div 及其所有子元素，但是如果您想自己删除所有元素，您可以这样做：

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

【讨论】：

隐藏与删除有优缺点

【解决方案3】：

Remove 应该删除元素和内容。这来自 JQ api：“当您想要删除元素本身以及其中的所有内容时，请使用 .remove()。”。

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

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

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

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

【讨论】：

【解决方案4】：

使用

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

将隐藏 div 和其中的元素。

【讨论】：

【解决方案5】：

这个方法不使用jQuery，如果父元素id是webapp_recovery:

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

【讨论】：