Remove parent div when page load?

Question

I have HTML like :

<div id="parent">
 <ul class="list">something here....</ul>
</div>

When page load, I want kill div that have id="parent". That means after finish the loading, I have only :

<ul class="list">something here....</ul>

How Javascript or Jquery can do this? Thanks for your help.

If you're looking to kill the div on page load, why have it in the first place? — Idiot211, Oct 29 '13 at 10:50
smarter way is : don't put `parent div` even on page load :) — Nishu Tayal, Oct 29 '13 at 10:51
It is my issue with "absolute" property and responsive design. It conflicts with many components so my solution is removing it. Thanks for your good ask. — Hai Tien, Oct 29 '13 at 10:53

score 4 · Accepted Answer · answered Oct 29 '13 at 10:52

4

Can you try:

$(function() {
    $("ul.list").unwrap();
});

Docs for unwrap().

answered Oct 29 '13 at 10:52

Nikos Paraskevopoulos

39,514
12
85
90

May it is what i am looking for. I will do it with your method. Thank you. – Hai Tien Oct 29 '13 at 10:59

score 2 · Answer 2 · edited May 23 '17 at 10:31

Try this famous code to completely remove div:

document.addEventListener('DOMContentLoaded',function(){
    var element = document.getElementById("parent");
    element.parentNode.removeChild(element);
},false);

remove element by id

And to remove only parent div use jQuery's unwrap:

$(function() {
    $("ul.list").unwrap();
});

OR in plain javascript:

  function unwrap() {
            var a = document.getElementById('element-to-be-unwrapped');
            newelement = a.firstElementChild.cloneNode();
            document.body.insertBefore(newelement, a);
            a.parentNode.removeChild(a);
  }

Yeah, but it will also remove the contents of the div. – matewka Oct 29 '13 at 10:52 — matewka, Oct 29 '13 at 10:52

score 1 · Answer 3 · edited Oct 29 '13 at 10:52

1

in jQuery, here is the code:

var ul_holder = $('#parent').html();
$('#parent').remove();
$(document).append(ul_holder);

You can replace $(document) with any other element

edited Oct 29 '13 at 10:52

matewka

9,912
2
32
43

answered Oct 29 '13 at 10:52

Alaa Badran

1,848
15
19

score 1 · Answer 4 · answered Oct 29 '13 at 10:56

1

Use .unwrap() function

  if (  $(".list").parent('#parent').is( "div" ) ) {
     $(".list").unwrap();
  }

answered Oct 29 '13 at 10:56

Nishu Tayal

20,106
8
49
101

score 1 · Answer 5 · answered Oct 29 '13 at 10:59

1

You can use closest() with remove()

$(function() {
    $("ul.list").closest('#parent').remove();
});

or you can use unwrap() like,

$(function() {
    $("ul.list").unwrap();
});

answered Oct 29 '13 at 10:59

Rohan Kumar

40,431
11
76
106

Remove parent div when page load?

5 Answers5