使用jQuery / javascript从HTML删除id属性

Question

我有一个mainWrap，里面的内容是动态填充的（如下所示）

          <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>

mainWrap的直接子代都mainWrap一个ID。我想在将ID保存到数据库之前删除ID 。现在我已经尝试过类似的操作

        var getContent = $('#mainWrap');  
        var finalContent =getContent.clone().find('*').removeAttr('id');// 1            
        var finalContent=getContent.clone().children().removeAttr('id');//2     
        alert(finalContent.html());

在这两种情况下，我的输出如下：

        <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被删除，而不是两个，我只有1 div。 但是当我独立尝试时，它可以与第二个一起使用。 这是小提琴

我怎么才能正确呢？我不确定为什么它在应用程序中失败并且无法独立工作！
谢谢你的时间

Answer 1

尝试更具体地选择父母。

尝试这个：

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

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

在这里查看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());
 });

Answer 2

我不确定我是否理解正确，但是要删除#mainWrap div的直接子代的#mainWrap ，可以使用以下代码：

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

Answer 3

使用each

您可以在每个jquery中找到有用的帮助

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

因为finalContent是具有多个dom的对象。

Answer 4

这是小提琴。 我想这就是你要找的

这是js代码：

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

Answer 5

也许这是您的问题的解决方案：

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

alert(mainWrap.html());