通过 Vanilla JS 使用 InnerText 查找元素并删除

Question

我正在尝试使用带有 vanilla JS 的 InnerText 查找和删除一个元素。不能使用 jQuery，或者编辑现有的网站代码，即使它会简单得多。 “新”注入的代码必须处理这项工作。

因为 div 类不是唯一的，而且顺序也不总是一致的，所以我需要一种方法来钩入元素并用 JS 将其删除。删除元素的代码将通过 AB 测试工具（即 Optimizely）部署在标头中。我可以删除类名为“rate-card”的元素，但我只想删除标题中显示“Clean Care”的元素。

这是我要识别和删除的网站代码。

<div class="collapse d-md-block" id="ItemRates-1">
    <div class="rate-card">
      <div class="rate-card-title">  
        <strong>Best Rate</strong>
        <button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK1" data-original-title="" title="">
        </button>
      </div>
        </div>
      
    <div class="rate-card">
      <div class="rate-card-title">  
        <strong>Clean Care</strong>
        <button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK2" data-original-title="" title="">
        </button>
      </div>
        </div>
            </div>

这是我到目前为止的代码。能够删除类名为“rate-card”的元素，但我只想删除标题为“Clean Care”的元素。元素的顺序并不总是相同的，所以使用子顺序语句来挂钩元素是不可能的。

<script> 
const elem= document.getElementsByClassName("rate-card")

while (elem.length > 0 )
    elem[0].remove();
</script>

Answer 1

您必须在字符串元素中查找文本并将其删除。

document.querySelectorAll(".rate-card").forEach(card => {
  const text = card.querySelector("strong").innerText;
  if(text === "Clean Care") {
    card.remove();
  }
});

<div class="collapse d-md-block" id="ItemRates-1">
  <div class="rate-card">
    <div class="rate-card-title">
      <strong>Best Rate</strong>
      <button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK1" data-original-title="" title="">
        </button>
    </div>
  </div>

  <div class="rate-card">
    <div class="rate-card-title">
      <strong>Clean Care</strong>
      <button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK2" data-original-title="" title="">
        </button>
    </div>
  </div>
</div>

或者您可以遍历字符串元素并返回到卡片以将其删除

document.querySelectorAll(".rate-card strong").forEach(strong => {
  const text = strong.innerText;
  if(text === "Clean Care") {
    strong.closest('.rate-card').remove();
  }
});

<div class="collapse d-md-block" id="ItemRates-1">
  <div class="rate-card">
    <div class="rate-card-title">
      <strong>Best Rate</strong>
      <button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK1" data-original-title="" title="">
        </button>
    </div>
  </div>

  <div class="rate-card">
    <div class="rate-card-title">
      <strong>Clean Care</strong>
      <button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK2" data-original-title="" title="">
        </button>
    </div>
  </div>
</div>

Answer 2

如果您将标题放在数据属性中（其值显示为:before 伪），您可以使用简单查询和forEach 删除元素。比如：

setTimeout(() =>
  document.querySelectorAll(`[data-title='Clean Care']`)
  .forEach(elem => elem.closest(`.rate-card`).remove()), 1500
);

.rate-card-title:before {
  content: attr(data-title);
  font-weight: bold;
}

.btn-plain:before {
  content: 'Select ...';
}

<div class="collapse d-md-block" id="ItemRates-1">
  <div class="rate-card">
    <div class="rate-card-title" data-title="Best Rate">
      <button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK1" data-original-title="" title="">
        </button>
    </div>
  </div>

  <div class="rate-card">
    <div class="rate-card-title" data-title="Clean Care"> (I will be deleted soon ...)
      <button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK2" data-original-title="" title="">
        </button>
    </div>
  </div>
</div>

[根据评论编辑]。如果需要从<strong>-element 中读取title，基本一样，只是需要对元素的textContent进行测试。

setTimeout(() => removeElem(`Clean Care`), 1500);

function removeElem(title) {
  document.querySelectorAll(`.rate-card-title`)
    .forEach(elem => {
      if (RegExp(title).test(elem.textContent)) {
        elem.closest(`.rate-card`).remove();
      }
    });
}

<div class="collapse d-md-block" id="ItemRates-1">
  <div class="rate-card">
    <div class="rate-card-title">
      <strong>Best Rate</strong>
      <button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK1" data-original-title="" title="">
            </button>
    </div>
  </div>

  <div class="rate-card">
    <div class="rate-card-title">
      <strong>Clean Care</strong>
      <button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK2" data-original-title="" title="">
            </button>
    </div>
  </div>
</div>