Removing id attribute from HTML using jQuery/javascript

Question

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

kidwon · Accepted Answer · 2013-01-24T11:12:00.833

1

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.com/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());
 });

edited Jan 24 '13 at 11:12

answered Jan 24 '13 at 10:56

kidwon

4,448
5
28
45

To see what is printed open your browser console! For instance in Chrome or Safari is F12 key – kidwon Jan 24 '13 at 11:08
I cannot use classes as they won't be the same each time.hence I tried it with `$('div', getContent).clone();` earlier.But when I do a `console.log(finalContent[0]);` I see the right output,but if I do a `alert(finalContent.html());` I get the output in my question.Why this? – coderunner Jan 24 '13 at 11:13
Because you see the `innerHTML` of the outer `textbox` div. This is what `.html()` does returns the inner HTML. Wrap both and get the parent html – kidwon Jan 24 '13 at 11:21
So if I do `alert(finalContent.parent.html())` will it give me the entire stuff?Please correct if wrong,still learning jquery! :P – coderunner Jan 24 '13 at 11:25
If you `alert(finalContent.parent().html())` you'll get the inner html of `body` which is `mainWrap`and its children The entire stuff it is – kidwon Jan 24 '13 at 11:27
Yup!!!Well..neever new this thing!! `console.log([0])` saved my life and offcourse you!Spend so much time for a stupid mistake!! :PThank you very much!Accepted and upvoted! :) – coderunner Jan 24 '13 at 11:31
If we are following I need one more help!! How can I get the HTML of the outer most div.(In mycase `#mainWrap`).I want the main or outer most div also with the id's removed. – coderunner Jan 25 '13 at 14:03
If you want the outer HTML you do that: http://stackoverflow.com/questions/5744207/jquery-outer-html Follow this example just change the `#xxx` selector with the selector of your most outer div `#mainWrap` If you want the inner HTML as ususal `$('#mainWrap').html()` – kidwon Jan 25 '13 at 14:40

denis-bu · Answer 2 · 2013-01-24T11:12:42.580

1

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');

edited Jan 24 '13 at 11:12

answered Jan 24 '13 at 11:04

denis-bu

3,426
1
17
11

It won't be divs every time!!Hence I tried using children as I wanted them to be removed for all the children of mainWrap. – coderunner Jan 24 '13 at 11:06
Looks like you can use * selector (I've try it in sample document). I've update my answer. – denis-bu Jan 24 '13 at 11:13

score 1 · Answer 3 · answered Jan 24 '13 at 11:07

1

Use each

You can find useful help each jquery

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

Because finalContent is object with more than one dom.

answered Jan 24 '13 at 11:07

Dipesh Parmar

27,090
8
61
90

When I do this I get the output same as in the question if I alert and correct output when I do `console.log(finalContent[0]);` Please see my comment to @Kidwon's answer – coderunner Jan 24 '13 at 11:16
Thank you!Got it to work!You have been a helpful guy for me!!Kudos!Cheers! – coderunner Jan 24 '13 at 11:33

score 1 · Answer 4 · answered Jan 24 '13 at 11:12

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());
  });
});

score 1 · Answer 5 · answered Jan 24 '13 at 11:19

1

Maybe this is the solution for your problem:

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

alert(mainWrap.html());

answered Jan 24 '13 at 11:19

rwasik

296
4
17

Removing id attribute from HTML using jQuery/javascript

5 Answers5