I have a mainWrap inside which content is populated dynamically.(It is somewhat like 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>
The immediate children of mainWrap
have an id attached to them.I want to remove the ids before I save it to the database.Now I have tried something like this
var getContent = $('#mainWrap');
var finalContent =getContent.clone().find('*').removeAttr('id');// 1
var finalContent=getContent.clone().children().removeAttr('id');//2
alert(finalContent.html());
In both the cases I get the output as follows:
<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>
The outer div is removed and instead of two I get only 1 div. But When I tried it out independently it works with the 2nd one.Here's the fiddle
How can I get it right.I am not sure why its failing in the application and working independently!
Thank you for the time