CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Nathan
Nathan

Reputation: 509

How can i remove a div and its contents from the DOM

im developing a web application and i am looking to return some error messages via ajax when there is error or success.

i have the ajax script working fine it returns and error or success however my issue is when returning the data i want it to remove the div #webapp_recovery from the dom all together not just hide it once its removed i want to show #webapp_notification

This is the form to submit a request via 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>

this is the error message i wish to show

<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>

i have tried the following but they dont seem to work 

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

is this at all possible or is there another method for returning a new div for message and removing the old

Upvotes: 2

Views: 88

Answers (5)

Newbie
Newbie

Reputation: 287

This method doesn't use jQuery, if the parent element id is webapp_recovery:

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

Upvotes: 0

Gian O&#39;Neil
Gian O&#39;Neil

Reputation: 71

Try jquery replaceWith function

Here's a sample fiddle https://jsfiddle.net/gianoneil/zofm4qx6/

say, your error div is hidden on page load, then here's how it's gonna look like

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

try playing with jQuery replaceWith, show, & hide functions, and you should be able to accomplish your mission :) have fun

Upvotes: 2

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34152

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

Will remove the div and all its children however if you want to remove all elements yourself you can do this:

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

Upvotes: 1

Preston159
Preston159

Reputation: 302

Using

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

will hide the div and the elements inside it.

Upvotes: 1

Derek Daley
Derek Daley

Reputation: 160

Remove should delete the element as well as contents. This is from the JQ api: "Use .remove() when you want to remove the element itself, as well as everything inside it.".

So I would use the following if your webapp_notification div already exists in the DOM:

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

Otherwise, if you are removing the old and adding the new, you could use something like:

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

Upvotes: 1

Related Questions