我如何從DOM中刪除div及其內容

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

Remove應該刪除元素以及內容。 這來自JQ api：“當您要刪除元素本身以及其中的所有內容時，請使用.remove（）。”

因此，如果您的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和hide函數，您應該能夠完成任務:)玩得開心

Answer 5

如果父元素ID為webapp_recovery ，則此方法不使用jQuery：

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