how to remove all the parent div using jQuery

Question

I have a div structure like this

<body>
  <div>
    <nav></nav>
    <nav></nav>
    <div>
      <div id=parent-conatiner>
        <div>
          <ul>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

now i want to remove all the parent element of the div #parent-container but not removing any element inside the #parent-container div, i dont want to use clone and then include the element in the body because i use some kendo controls inside the #parent-container and the kendo controls stopped working when i use the cloned div basically i dont want to use the following logic

var $cloned=$('#parent-conatiner')
$('body').empty();
$('body').append($cloned);

any help would be appreciated, thank you

Possible duplicate of : http://stackoverflow.com/questions/6647736/how-to-delete-parent-element-using-jquery — Varit J Patel, Jul 29 '16 at 05:39

Shintu Joseph · Accepted Answer · 2017-12-04T10:51:09.873

5

Use the below method, all event bindings are kept intact.

$('#parent-conatiner').parentsUntil('body').replaceWith($('#parent-conatiner'));

edited Dec 04 '17 at 10:51

answered Jul 29 '16 at 05:40

Shintu Joseph

962
7
19

dint try yet, but have you any idea y that doesn't work – Shintu Joseph Jul 29 '16 at 05:45
if you remove the parents, you remove the element with it – Marko Mackic Jul 29 '16 at 05:51
i used .parents().remove() but it removes all the div including the #parent-container div, here is a fiddle example: https://jsfiddle.net/lijin_john/0oa8wdba/ – Lijin Durairaj Jul 29 '16 at 05:55
logicly because when you remove the div then you remove all it's content – Marko Mackic Jul 29 '16 at 05:56
Y not try prevAll() as @MarkoMackic answered – Shintu Joseph Jul 29 '16 at 05:59

madalinivascu · Answer 2 · 2016-07-29T06:45:01.590

0

Use the jquery unwrap() function

or use the cloning method and eventdelegate you kendo controls

another solution will be:

$('body').append($('#parent-conatiner'));
$('body div:last').prevAll().remove();

but this should be the same problem like the cloning

another option is detach()

var el = $('#parent-conatiner').detach();
$('body').empty().append(el);

edited Jul 29 '16 at 06:45

answered Jul 29 '16 at 05:38

madalinivascu

32,064
4
39
55

unwarp() removes only the parent div, basically i want to remove all the parent div of #parent-container and upto the body element – Lijin Durairaj Jul 29 '16 at 05:40
use it multiple times – madalinivascu Jul 29 '16 at 05:43

how to remove all the parent div using jQuery

2 Answers2