如何使用Javascript在html代码中的特殊标记之前和之后删除标记？

Question

我需要使用Javascript删除div中具有“ item”类的所有标签，但一个标签除外<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>))

我只需要该标签<b> goad tag(1, 2, ...) (i need just this tag) </b>，我想<div class=item> ... </div>使用javascript 在此标签中删除之前和之后的所有标签。

注意：我<div class=item> ... </div>在源文件（test.html）中有很多div（），并且我想在加载页面时拥有如下内容：

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

我是Java的新手，有人可以帮助我解决这个问题吗？

Answer 1

我可以通过遍历div.item元素，在其中找到b元素，从中删除所有元素div，然后添加b背面来做到这一点：

// Find all the div.item elements
document.querySelectorAll("div.item").forEach(function(div) {
  // Find the first `b` element with the desired matching text
  var b = Array.prototype.find.call(
    div.querySelectorAll("b"),
    function(b) {
      return b.textContent.indexOf("goal tag") !== -1;
    }
  );
  // Remove all children from the div
  while (div.lastChild) {
    div.removeChild(div.lastChild);
  }
  // If we found the relevant `b` element, add it back
  if (b) {
    div.appendChild(b);
  }
});

现场示例：

// Find all the div.item elements
document.querySelectorAll("div.item").forEach(function(div) {
  // Find the first `b` element with the desired matching text
  var b = Array.prototype.find.call(
    div.querySelectorAll("b"),
    function(b) {
      return b.textContent.indexOf("goal tag") !== -1;
    }
  );
  // Remove all children from the div
  while (div.lastChild) {
    div.removeChild(div.lastChild);
  }
  // If we found the relevant `b` element, add it back
  if (b) {
    div.appendChild(b);
  }
});

document.querySelectorAll("div.item").forEach(function(div) {
  var b = Array.prototype.find.call(
    div.querySelectorAll("b"),
    function(b) {
      return b.textContent.indexOf("goal tag") !== -1;
    }
  );
  while (div.lastChild) {
    div.removeChild(div.lastChild);
  }
  if (b) {
    div.appendChild(b);
  }
});

或搭配ES2015 +：

// Find all the div.item elements
for (const div of document.querySelectorAll("div.item")) {
  // Find the first `b` element with the desired matching text
  const b = [...div.querySelectorAll("b")].find(b => b.textContent.includes("goal tag"));
  // Remove all children from the div
  while (div.lastChild) {
    div.removeChild(div.lastChild);
  }
  // If we found the relevant `b` element, add it back
  if (b) {
    div.appendChild(b);
  }
});

注意，forEach关于NodeListby 的返回querySelectorAll是相对较新的；我在这里的答案有一个polyfill，可用于较旧的浏览器（包括IE8及更高版本）。

此问题及其答案（包括mine）中div.item讨论了删除内容的循环。

另请参见Krzysztof Janiszewski进行标记往返的方法，如果您知道b元素上没有事件处理程序，这是非常合理的。