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


Removing id attribute from HTML using jQuery/javascript

我有一个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 保存到数据库之前将其删除。现在我已经尝试了这样
的事情

        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。但是当我独立尝试时,它适用于第二个。这是小提琴

我怎样才能把它做好。我不确定为什么它在应用程序中失败并独立工作!
谢谢你的时间

尝试在父母选择中更具体。

试试这个:

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

使用each

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

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

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

这里是小提琴。我认为这就是你要找的

这是 js 代码:

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

我不确定我是否正确理解了你,但是要删除#mainWrapdiv的直系子代的id,您可以使用以下代码:

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

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

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