I have these elements on my page:

<div id="123test"><p>test</p></div>
<div id="123test"><p>othertext</p></div>

And I am trying to remove the div if it contains "test" text inside, using Java Script, but it does not seem to work.

Here is my JS:

var container = document.getElementById('123test');

if (container.textContent=='test') {

container.style.display="none";

};

var container = document.getElementById('123test');

if (container.textContent == 'test') {

  container.style.display = "none";

};

<div id="123test"><p>test</p></div>
<div id="123test"><p>othertext</p></div>

I also tried using :contains selector way, but the result was the same. The style of the container does not change at all. What do I do wrong? Is there another approach possible? This code is a simplified version of my project, but neither of these two work. I would be very gratefull if someone would help me to overcome the issue.

CodePudding user response：

Make sure your HTML looks exactly like this:

<div id="123test"><p>test</p></div>
<!-- no whitespace or line breaks before or after <p>test</p> -->

and not like this

<div id="123test">
  <p>test</p>
</div>

To avoid this problem, call trim() on container.textContent:

var container = document.getElementById('123test');

if (container.textContent.trim() == 'test') {

  container.style.display = "none";

};

<div id="123test">
  <p>test</p>
</div>
<div id="123test2">
  <p>othertext</p>
</div>

And I am trying to remove the div if it contains "test" text inside, using Java Script [...]

If it is sufficient that test is contained, check for includes('test') instead:

var container = document.getElementById('123test');

if (container.textContent.includes('test')) {

  container.style.display = "none";

};

<div id="123test">
  <p>test123</p>
</div>
<div id="123test2">
  <p>othertext</p>
</div>

Important sidenote: You cannot have more than one element with the same id.

Sidenote 2: :contains only exists in jQuery, not in CSS.

Sidenote 3 about using innerText: This had been my first approach, but for some strange reason on Safari/MacOS it won't hide the container:

var container = document.getElementById('123test');

if (container.innerText == 'test') {

  container.style.display = "none";

};

console.log(container.innerText.length); // 6 (!) on Safari/MacOS

<div id="123test">
  <p>test</p>
</div>
<div id="123test2">
  <p>othertext</p>
</div>

CodePudding user response：

Here is an example of checking an arbitrary DOM tree for text nodes that contain the string "test" and then hiding them by setting display: none;.

The function hideTestNodes accepts NodeList and primarily makes use of nodeType and textContent.

const wrapper = document.getElementById('wrapper')

const hideTestNodes = (children) => {
  for (const child of children) {
    if (child.nodeType === 1) {
      // If the node is another Element, check its child nodes
      hideTestNodes(child.childNodes)
    }
 
    // If the node is a text node and the content includes 'test'
    // then hide the parent element containing the text node
    if (child.nodeType === 3 && /test/i.test(child.textContent)) {
      child.parentElement.style.display = 'none'
    }
  }
}

hideTestNodes(wrapper.childNodes)

<div id="wrapper">
  <div>
    <p>test</p>
  </div>
  <div>
    <p>some other text</p>
  </div>
  <div>
   <p>some deeply <span> nested test</span> text</p>
  </div>
  <div>
    <p>this <span>includes</span> test.</p>
  </div>
</div>

CodePudding user response：

If you want to do that to only one specific div, then it's very simple:

NOTE: I added two seconds to let you see how it happens. you can remove the timer.

 let test1 = document.getElementById("test1");

  if (test1.innerHTML.includes("test")) {

    setTimeout(() => {

      test1.style.display = "none";
      
    }, 2000);
    
  }

<div id="container">
  <div id="test1"><p>test</p></div>
  <div id="test2"><p>othertext</p></div>
</div>

If you want to check all divs, it's still simple and you just need to make an array from them then use forEach loop to check all divs in that container:

let divs = document.getElementById("container").children;

[...divs].forEach(div => {
  if (div.textContent.includes("test")) {

    setTimeout(() => {

      div.style.display = "none";

    }, 2000);

  }
});

<div id="container">
  <div id="test1"><p>test</p></div>
  <div id="test2"><p>othertext</p></div>
</div>