使用 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 的直系子级附加了一个 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。 但是当我独立尝试它时，它可以与第二个一起使用。Here's小提琴

我怎样才能把它弄好。我不知道为什么它在应用程序中失败并独立工作！
谢谢你的时间

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

使用each

您可以找到有用的帮助each jquery

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

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

Answer 3

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

这里是js代码：

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

Answer 4

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

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

Answer 5

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

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

alert(mainWrap.html());