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="-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 modo 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="-UPWTMKZ7OUTN8KG2JEK47LNPN5JO261H" class="textBox contentBox">
                   <div style="" class="editable"><p>
                ullamco laboris nisi ut aliquip ex ea modo 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 modo 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

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="-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 modo 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="-UPWTMKZ7OUTN8KG2JEK47LNPN5JO261H" class="textBox contentBox">
                   <div style="" class="editable"><p>
                ullamco laboris nisi ut aliquip ex ea modo 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 modo 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

• php
• javascript
• jquery
• html

• There is a </div> too many. – Amberlamps Commented Jan 24, 2013 at 10:52

5 Answers 5

Try be more specific in parents selection .

Try this:

$(document).ready(function () {
    var getContent = $('#mainWrap');
    var finalContent = $('div.textBox', getContent).clone();

    finalContent.each(function () {
        $(this).removeAttr('id');
    });
    console.log(finalContent[0]);
});

See it here http://jsbin./ewosix/1/

 $('button').click(function () {
     var newContent = $(finalContent).first().wrap('<div class="addId" />');
     newContent = $(newContent).parents( /*You can add specific selector for parents like div.textBox or leave it emty for all parents */ ).each(function (index, value) {
         $(this).attr('id', index);
     });
     alert($(newContent).html());
 });

Use each

You can find useful help each jquery

finalContent.each(function()
{
    $(this).removeAttr('id')
})

Because finalContent is object with more than one dom.

here is the fiddle. I think this is what you are looking for

Here is the js code:

$(function(){
  $('button').click(function(){
     $("#wrap").children('div').each(function(){
        $(this).removeAttr('id');
     });
   alert($("#wrap").html());
  });
});

I'm not sure I understand you correctly, but to remove id's of immediate children of #mainWrap div, you can use following code:

$('#mainWrap > *').removeAttr('id');

Maybe this is the solution for your problem:

var mainWrap = $('#mainWrap').clone();
mainWrap.children().removeAttr('id');

alert(mainWrap.html());