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

Question

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

Please elaborate on what "they dont seem to work" means? How do you call that code? Have you checked the console for errors? — j08691, Mar 25 '16 at 02:47
Can you create a jsfiddle http://jsfiddle.net to demonstrate ? — guest271314, Mar 25 '16 at 03:02
after trying some of the solutions below it seems to work and remove everything from inside them dom. — Nathan, Mar 25 '16 at 03:09
Possible duplicate of [Remove all child elements of a DOM node in JavaScript](http://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript) — Rob, Mar 25 '16 at 03:46

Gian O'Neil · Answer 1 · 2016-03-25T03:11:56.923

2

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

edited Mar 25 '16 at 03:11

answered Mar 25 '16 at 02:48

Gian O'Neil

71
3

Sir, I think `.show()` will be more efficient than using `.css('display','block')`. – rmondesilva Mar 25 '16 at 02:54
Yes, I actually forgot to use that, thanks for reminding me – Gian O'Neil Mar 25 '16 at 03:08

Ashkan Mobayen Khiabani · Accepted Answer · 2016-03-25T02:44:33.220

1

$('#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()

edited Mar 25 '16 at 02:44

answered Mar 25 '16 at 02:39

Ashkan Mobayen Khiabani

33,575
33
102
171

are there pros or cons to hiding vs removing – Nathan Mar 25 '16 at 03:09

score 1 · Answer 3 · answered Mar 25 '16 at 02:41

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();

score 1 · Answer 4 · answered Mar 25 '16 at 02:41

1

Using

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

will hide the div and the elements inside it.

answered Mar 25 '16 at 02:41

Preston159

300
1
3
10

score 0 · Answer 5 · edited Mar 30 '16 at 04:51

0

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

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

edited Mar 30 '16 at 04:51

Steve

9,335
10
49
81

answered Mar 25 '16 at 02:40

Newbie

287
1
8

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

5 Answers5