javascript - 删除包含字符串的 DOM 元素

Question

所以我有这段代码，它检查 Name 是否存在，如果存在，它会删除嵌套在其中的 span 标签。

<div id="box">
  <br>
  <span style="font-size: 12px">
    <a>
      <span style="color: #000000">
        <b>Name</b>
      </span>
    </a>
  </span>

但是 name 也可以放在这些标签中:

  <br>
  <span>
    <a>Name</a>
  </span>
</div>

我将如何使用 jquery 来检查它？我试过:

$('span:contains("Name")').remove();
$('span > a > span b:contains("Name")').remove();

似乎没有任何效果。

编辑#2:还有一些 br 标签，我只是将它们包括在内。只有当它们在被移除的标签之前时，我才想移除它们。

谢谢。

Answer 1

如果你想精确地定位带有文本“Name”的元素，你可以使用filter()，而不是像:contains那样将定位带有文本的元素，例如“Name with一些其他文本...”:

在 .load() 回调函数中设置代码

$('#box').load('myUri', function () {
    $('#box span').has('b, a').filter(function () {
        return $.trim($(this).text()) === "Name";
    }).remove();
});

等价于 :contains 将是:

$('#box span').has('b, a').filter(function(){
    return $(this).text().indexOf("Name") != -1;
}).remove();

更新了以下评论:

$('#box').load('myUri', function () {
     $('#box span').has('b, a').filter(function () {
         var toRemoveSpan = $(this).text().indexOf("Name") != -1 ? true : false;
         if (toRemoveSpan && $('span').prev('br').length) {
             $(this).prev('br').remove()
         }
         return toRemoveSpan;
     }).remove();
 });

这将给出相同的结果:$('#box').empty();

如果这不是您想要的行为，您必须在问题中更加具体。