获取最外层div元素的HTML（最高父级）

Question

I have a div that I fetch dynamically and it is structured as below.

      <div id="mainWrap">
            <div style="z-index: 1001; height: 407px; width: 328px; top: 150px; left: 601.5px;" id="com-TMRJDOR2KOET3X6JPV6XGU0FB7RGJ926" class="textBox contentBox">
               <div style="" class="editable"><p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, </p>
               </div>
            </div>

            <div style="z-index: 1002; height: 616px; width: 288px; top: 29px; left: 3.5px;" id="com-UPWTMKZ7OUTN8KG2JEK47LNPN5JO261H" class="textBox contentBox">
               <div style="" class="editable"><p>
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
              </div>
           </div>            
      </div>

Now,I want to remove the ids of all the children which I achieved like this.

      var getContent = $('#mainWrap');
      var finalContent = getContent.clone().children().removeAttr('id');
      var saveContent  = finalContent.parent().html();

But I get the inner div's with out the outermost div ie mainWrap .I also want the mainWrap div to be returned in the html I get.

This is what I tried to do,worked to some extent:

    $.fn.getOuter = function(val){
      return $('<div class="temp">').append($('#'+val).clone()).html();
    }
    var htmlPage = $.fn.getOuter('mainWrap');

If I do alert(htmlPage) I get the entire content.But when I try to remove the id attributes using this var content=$(htmlPage).children().removeAttr('id'); I don't get the correct HTML.I still get only the children inside mainWrap .I am not sure where am I wrong.Any help would be appreciated.
Thanks for your time.

Answer 1

The problem is because when you do .parent() in final content, there is no parent as you've cloned the element into memory. Instead, wrap it in another div and get the html() of that. I have also amended the logic slightly, try this:

var $getContent = $('#mainWrap').clone();
$getContent.children().removeAttr('id');
var saveContent  = $getContent.wrap('<div></div>').parent().html();

Answer 2

Here is a simple example that works ( JSFiddle ):

<div id="id1">
    <span>some text</span>
    <div id="someid">some more text</div>
</div>

<textarea id="ta"></textarea>

var getContent = $('<div>').append($("#id1").clone());
getContent.find("*").removeAttr("id");
$("#ta").val( getContent.html() );

You can append the cloned elements into a div on the fly. I use find("*") because children() only gets the direct descendants of getContent . I assumed you wanted to remove all id attributes regardless of how deep they were.