如何使用JavaScript删除包含特定文本的div的父元素？

Question

假设我的代码中有这样的结构：

<div>
  <div>This is my text</div>
  <div>Text continues...</div>
</div>

<div>
  <div>Another text</div>
  <div>Other text</div>
</div>

<div>
  <div>This is my text</div>
  <div>Text continues...</div>
</div>

我想要做的事情是（不使用 jquery）：

搜索包含文本部分 this is my 的 div（注意，我没有传递完整的文本，只是部分文本 this is my）。

每当我找到包含这部分文本的 div 时，我都想要删除父 div！因此，删除其中的所有内容，包括：

<div>This is my text</div> 
and
<div>Other text</div>

因此，我只会得到这个：

<div>
  <div>Another text</div>
  <div>Other text</div>
</div>

我尝试了这种方法：

var elems = document.querySelectorAll("div"),
    res = Array.from(elems).find(v => v.textContent == 'Vídeos que contêm');
alert(res ? 'found!' : 'not found');

但它只能搜索特定的文本！而且它仍然无法适用于每一个情况。

- Andrezza Silva Xavier

Answer 1

你的代码无法工作，因为:

1. 你试图检查textContent是否等于（==）字符串，但你需要检查文本内容是否包含字符串includes。

2. 它只是找到元素，而不是将它们删除。你需要使用.remove()来移除元素。

document.querySelectorAll("div > div:first-child").forEach(ele => {
  ele.textContent.includes('This is my') && ele.parentNode.remove();
});

document.querySelectorAll("div > div:first-child").forEach(ele => {
  ele.textContent.includes('This is my') && ele.parentNode.remove();
});

<div>
  <div>This is my text</div>
  <div>Text continues...</div>
</div>
<div>
  <div>Another text</div>
  <div>Other text</div>
</div>
<div>
  <div>This is my text</div>
  <div>Text continues...</div>
</div>

---

我正在尝试不使用jQuery

虽然您不想使用jQuery，但这很简单，并且代码更少。

$("div > div:contains('This is my')").parent().remove();   

$("div > div:contains('This is my')").parent().remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>This is my text</div>
  <div>Text continues...</div>
</div>
<div>
  <div>Another text</div>
  <div>Other text</div>
</div>
<div>
  <div>This is my text</div>
  <div>Text continues...</div>
</div>

- Mohammad

Answer 2

你的方法是正确的，但需要使用不同的文本。不要使用==来匹配div文本内容中的文本，而是使用String.includes()。

可以通过以下方式进行过滤以删除：

var elems = document.querySelectorAll("div");

Array.from(elems).filter(v => v.textContent.includes('This is my') ? v.remove() : v);

<div>
  <div>This is my text</div>
  <div>Text continues...</div>
</div>

<div>
  <div>Another text</div>
  <div>Other text</div>
</div>

<div>
  <div>This is my text</div>
  <div>Text continues...</div>
</div>

- Jai

Answer 3

使用 contains 方法。

res = Array.from(elems).find(v => v.textContent.contains('Vídeos que contêm'));

- Anji

Answer 4

您可以使用filter和foreach组合来移除它。

注意：您可以添加toLowerCase检查以使其更可靠。

Array.from(elems).filter(v => v.textContent.indexOf('Another')!==-1).forEach(a=> a.remove());

var elems = document.querySelectorAll("div");
Array.from(elems).filter(v => v.textContent.indexOf('Text continues')!==-1).forEach(a=> a.remove());

<div>
  <div>This is my text</div>
  <div>Text continues...</div>
</div>

<div>
  <div>Another text</div>
  <div>Other text</div>
</div>

<div>
  <div>This is my text</div>
  <div>Text continues...</div>
</div>

- Just code

Answer 5

我已经优化了你的代码，但是查找操作只会返回第一个匹配项，因此删除节点只会删除第一个子节点。

你需要删除所有匹配的实例，因此需要循环遍历它们。

// This deletes all the matched instances rather than the first 
Array.from(elems)
  .filter(v => v.textContent.includes('This is my'))
  .map(matchedEle => matchedEle.remove());

Sample Snippet with your code and the modification :

var elems = document.querySelectorAll("div"),

  // This gets only the first instance.
    res = Array.from(elems).find(v => v.textContent.includes('This is my'));
    alert(res ? 'found!' : 'not found');
  res.parentNode.removeChild(res);

// This deletes all the matched instances rather than the first 
Array.from(elems)
  .filter(v => v.textContent.includes('This is my'))
  .map(matchedEle => matchedEle.remove());

<div>
  <div>This is my text</div>
  <div>Text continues...</div>
</div>

<div>
  <div>Another text</div>
  <div>Other text</div>
</div>

<div>
  <div>This is my text</div>
  <div>Text continues...</div>
</div>

- Hiteshdua1