Hiding a specific tag with vanilla JavaScript based on its content

Question

Hiding a specific tag with vanilla JavaScript based on its content

I am facing a challenge with my code that is supposed to hide div elements containing a specific word along with additional text. I have tried multiple solutions but none seem to work effectively.

Any assistance on how to hide divs properly will be greatly appreciated. Thank you!

let divs = document.getElementsByClassName('test');

for (let x = 0; x < divs.length; x++) {
    let div = divs[x];
    let content = div.innerHTML.trim();
  
    if (content == 'example') {
       div.style.display = 'none';
    }
}

<div class="test">
    ipsum
</div>
<div class="test">
    example
</div>
<div class="test">
    example complete
</div>

javascript html typescript

Answer 1

Answer №1

To identify and remove the specific div element containing more than just the word "example," you can utilize JavaScript's string.includes() method.

An effective approach is to use "example " within the includes() function. By including a space after "example," only the div with additional content will be removed.

let divs = document.getElementsByClassName('test');

for (let x = 0; x < divs.length; x++) {
    let div = divs[x];
    let content = div.innerHTML.trim();
  
    if (content.includes('example')) {
        div.style.display = 'none';
    }
}

<div class="test">
    ipsum
</div>
<div class="test">
    example
</div>
<div class="test">
    example complete
</div>

Answer 2

To identify and remove the specific div element containing more than just the word "example," you can utilize JavaScript's string.includes() method.

An effective approach is to use "example " within the includes() function. By including a space after "example," only the div with additional content will be removed.

let divs = document.getElementsByClassName('test');

for (let x = 0; x < divs.length; x++) {
    let div = divs[x];
    let content = div.innerHTML.trim();
  
    if (content.includes('example')) {
        div.style.display = 'none';
    }
}

<div class="test">
    ipsum
</div>
<div class="test">
    example
</div>
<div class="test">
    example complete
</div>

Answer 3

Answer №2

Something contemporary…

document.querySelectorAll('.example').forEach((element, index) => {
   if (element.innerText.includes('sample')) {
       element.style.display = 'none';
   }
})

<div class="example">lorem</div>
<div class="example">sample</div>
<div class="example">sample complete</div>

Resources: NodeList.prototype.forEach() String.prototype.includes()

Answer 4

Something contemporary…

document.querySelectorAll('.example').forEach((element, index) => {
   if (element.innerText.includes('sample')) {
       element.style.display = 'none';
   }
})

<div class="example">lorem</div>
<div class="example">sample</div>
<div class="example">sample complete</div>

Resources: NodeList.prototype.forEach() String.prototype.includes()

Answer 5

Answer №3

If you need to eliminate the div element that includes a specific search word (verified using includes), as well as other characters, you can save the word in a variable and compare the length of the text with it.

let divs = document.getElementsByClassName('test');
const word = 'example';

for (let x = 0; x < divs.length; x++) {
  let div = divs[x];
  let content = div.innerHTML.trim();
  if (content.includes(word) & content.length > word.length) {
    div.style.display = 'none';
  }
}

<div class="test">
ipsum
</div>
<div class="test">
example
</div>
<div class="test">
example complete
</div>

Below is an updated version of the code for better readability:

let divs = document.querySelectorAll('.test');
const word = 'example';

divs.forEach(div => {
  const { style, textContent } = div;
  const trimmed = textContent.trim();
  if (trimmed.includes(word) && trimmed.length > word.length) {
    style.display = 'none';
  }
});

<div class="test">
ipsum
</div>
<div class="test">
example
</div>
<div class="test">
example complete
</div>

Answer 6

If you need to eliminate the div element that includes a specific search word (verified using includes), as well as other characters, you can save the word in a variable and compare the length of the text with it.

let divs = document.getElementsByClassName('test');
const word = 'example';

for (let x = 0; x < divs.length; x++) {
  let div = divs[x];
  let content = div.innerHTML.trim();
  if (content.includes(word) & content.length > word.length) {
    div.style.display = 'none';
  }
}

<div class="test">
ipsum
</div>
<div class="test">
example
</div>
<div class="test">
example complete
</div>

Below is an updated version of the code for better readability:

let divs = document.querySelectorAll('.test');
const word = 'example';

divs.forEach(div => {
  const { style, textContent } = div;
  const trimmed = textContent.trim();
  if (trimmed.includes(word) && trimmed.length > word.length) {
    style.display = 'none';
  }
});

<div class="test">
ipsum
</div>
<div class="test">
example
</div>
<div class="test">
example complete
</div>

Answer 7

Answer №4

Performing div.innerHTML.trim() will extract the entire content of the div element.

https://jsfiddle.net/19xo2yLj/4/

Explore using regular expressions for your search, and consider not just hiding a div based on its class, but rather replacing its contents. Unfortunately, I don't have more information to offer at this time.

Answer 8

Performing div.innerHTML.trim() will extract the entire content of the div element.

https://jsfiddle.net/19xo2yLj/4/

Explore using regular expressions for your search, and consider not just hiding a div based on its class, but rather replacing its contents. Unfortunately, I don't have more information to offer at this time.

Hiding a specific tag with vanilla JavaScript based on its content

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

"Encountering a glitch in the Typescript/Node API where Express routes

Shifting a div element around the webpage and letting it fall into place if it intersects with another div using plain JavaScript

User Agent Stylesheets do not take effect

Turn off spellcheck for all material-ui elements

Is there a way to trigger a function with the onclick event in NextJs?

Integrate Geometric Information into PostGIS

It appears that the JavaScript array is able to modify itself autonomously

unable to download file and missing image display

Application Path-related Relative Path Problem in MVC Deployment

Arranging divs in a row using jQuery sortable technique

Capturing and setting form element values within a Javascript Module Pattern

"Encountering issue with SCSS variable not being applied to background in file

Invoke a function and assign it to an export variable

Incorporating mimes into ASP .NET MVC

"Oops! Looks like there's a reference error - the function you're trying

Display block disappearance persists even after being set to none

The error message "Unable to retrieve property 'commands' of undefined (discord.js)" indicates that the specified property is not defined

Creating a JSFiddle with sprites using source and image files from Github with THREE.JS - a step-by-step guide

How to stop Bootstrap collapsible items from "shifting"

NestJS Logger: Issue setting logger types in main.ts