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

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

我的ajax脚本工作正常，它返回错误或成功，但我的问题是，当返回数据时，我希望它从dom中删除div#webapp(恢复），而不仅仅是在删除后隐藏它，我希望显示#webapp)通知

这是通过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并删除旧div

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

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

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

---

如果父元素id为

webapp\u recovery

，则此方法不使用jQuery：

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

---

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

因此，如果DOM中已经存在您的webapp_通知div，我将使用以下命令：

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

否则，如果要删除旧项并添加新项，则可以使用以下方法：

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

使用

---

将隐藏div及其内部的元素。

请尝试jquery replaceWith函数

这是一把提琴样品

比如说，您的错误div在页面加载时被隐藏，然后 下面是它的样子

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

---

尝试使用jQuery的replaceWith、show和hide函数，您应该能够完成您的任务：）玩得开心

请详细说明“它们似乎不起作用”的含义？那代码怎么称呼？你检查过控制台的错误了吗？你能创建一个JSFIDLE来演示吗？在尝试了下面的一些解决方案之后，它似乎可以工作，并从它们的dom中删除所有内容。可能重复Sir，我认为

.show（）

比使用

.css（'display'，'block'）

更有效。是的，我实际上忘记了使用它，谢谢你提醒我隐藏和移除的利弊

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

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

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