如何用JavaScript移除HTML中item类div内指定<b>标签外的所有标签？

问题描述 #

我是JavaScript新手，需要在页面加载时，移除HTML文档中所有class为“item”的<div>内除特定<b>标签外的所有标签。

我的HTML示例代码如下：

<div class="item"> 
  <a href="sample-href1"> 
    <div class="result-image"> 
      <h5 class="result-cat cat-conf wn">test</h5> 
    </div> 
  </a> 
  <h4>1. <a href="sample-href2" title="sample-title2"> 
    <b> goal tag1 (i need just this tag) </b> 
  </a> </h4> 
  <span class="feature">test</span> 
  <div class="compact"> 
    </br> 
    <a href="test12" title="test12"> test12 </a> 
    <br> 
    <b> some text </b> 
    <a href="test123" title="test123"> test123 </a> - <a href="test147" title="test147" > test147 </a> 
    </br> 
    <b>11</b> another some text 
    </br> 
  </div> 
  <a href="test159" title="test159" class="download"> test </a> 
  <div class="clr"></div> 
</div> 
<div class="item"> 
  <a href="sample-href1968"> 
    <div class="result-image"> 
      <h5 class="result-cat cat-conf wn">test418</h5> 
    </div> 
  </a> 
  <h4>2. <a href="sample-href215" title="sample-title215"> 
    <b> goal tag2 (i need just this tag) </b> 
  </a> </h4> 
  <span class="feature">test23</span> 
  <div class="compact"> 
    </br> 
    <a href="test12234" title="test12234"> test12234 </a> 
    <br> 
    <b> some text </b> 
    <a href="test12233" title="test12233"> test12233 </a> - <a href="test14657" title="test14657" > test14657 </a> 
    </br> 
    <b>16</b> another some text 
    </br> 
  </div> 
  <a href="test15912" title="test15912" class="download"> test </a> 
  <div class="clr"></div> 
</div> 
... (and so on (<div class=item> ... </div>))

我仅需要保留每个item类<div>中类似<b> goal tag1 (i need just this tag) </b>的特定<b>标签，移除该标签之外的所有其他标签，最终页面加载后呈现如下效果：

<div class=item> <b> goal tag1 (i need just this tag) </b> </div> 
<div class=item> <b> goal tag2 (i need just this tag) </b> </div> 
...

解决方案 #

嘿，作为JS新手，咱们一步步来实现这个需求，代码简单易懂，还能帮你理解DOM操作的基本逻辑：

// 等待页面所有HTML加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有class为item的div元素
  const itemDivs = document.querySelectorAll('.item');
  
  // 遍历每个item元素
  itemDivs.forEach(function(item) {
    // 精准定位目标b标签：h4直接子元素a里面的b标签（避免误选其他b标签）
    const targetB = item.querySelector('h4 > a > b');
    
    // 先清空当前item里的所有内容
    item.innerHTML = '';
    
    // 如果找到了目标b标签，就把它添加回item中
    if (targetB) {
      // 用cloneNode(true)深克隆标签（连里面的文本一起复制）
      item.appendChild(targetB.cloneNode(true));
    }
  });
});

代码解释：

• DOMContentLoaded事件：确保页面所有HTML都加载完毕后再执行JS，避免出现找不到元素的问题。
• document.querySelectorAll('.item')：获取页面上所有class为item的div，返回一个可遍历的节点列表。
• item.querySelector('h4 > a > b')：使用后代选择器精准定位你需要保留的b标签——只有h4的直接子a标签里的b才会被选中，这样就不会误选其他地方（比如.compact里的b标签）。
• item.innerHTML = ''：清空当前item里的所有内容。
• targetB.cloneNode(true)：克隆目标b标签（true表示深克隆，会复制标签内的所有文本和子元素），然后用appendChild把克隆的标签添加回清空后的item里。

注意事项：

• 如果某个.item里没有找到目标b标签，这个item会被清空，不会报错。
• 如果你需要保留的b标签位置有变化（比如不在h4>a里），只需要修改querySelector里的选择器即可，比如如果是直接在h4里，就改成item.querySelector('h4 > b')。

内容的提问来源于stack exchange，提问作者Mohammad Jawad Barati