How to remove parent of a div has special text using javascript?

user_10492695 0
Viewed 695

Assuming I have this structure in my code:

<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>

What I'm trying to do is (with no jquery):

Search for this is my (realize that I'm not passing the full text. Just a part of it this is my).

And everytime I find a div that contains this part of text, I want to remove the parent div! Consequently, by removing everything within it, which includes:

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

So as a result, I would have only this:

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

I tried this way:

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

But it searches for specific text! And it still does not work for every occurrence.

html javascript
5 Answers

Your code doesn't work because:

  1. You trying to check if textContent is equal to (==) string but you need to check if text content includes string.

  2. It just find elements and doesn't remove them. You need to use .remove() to removing elements.

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>

I'm trying to do with no jquery

Although you don't want to use jQuery but it is very simple to do and has less code

$("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>

user_51047480

Use contains method

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

You can use filter and foreach combination to remove it.

Note: you can add toLowerCase check to make it more reliable.

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>

user_26308170

I have enhanced your code, but the find will return the first instance of the match found, hence the deleted node would only delete the first child.

You need to delete all the matched instances , hence need to loop over them

// 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>

user_18700880

You are doing it correctly but with a different text. Instead of == matching the text inside of text content of the div just use String.includes().

Just filter it this way to remove: 

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>

user_10591010
Related