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

Oops! Material-UI is giving an error because the data grid component needs each row to have a unique id property. There was a row provided in the rows prop that does not have an

Display a loading spinner on the browser while the form is being submitted

When incorporating @babel/standalone, a JavaScript memory limit is exceeded

Display the hidden div element when clicked

Generating intricate JSON structures with JavaScript programming instructions

Error TS2322: Cannot assign type 'Promise<Hero | undefined>' to type 'Promise<Hero>'

What is the best way to position a button under an h3 heading using the display flex

Is there a JavaScript equivalent to the explode function in PHP with similar functionality

Issue with remounting in Nextjs 13

The latest version is available, but remember to update @react-navigation/bottom-tabs, @react-navigation/stack, and @react-navigation/drawer to at least version 5.10.0

I am facing an issue with the responsiveness of the mat-card component within a div in

The original items are not utilized by jquery-ui autocomplete

Exploring the basics of caching in Node.js and Express: a beginner's

Merging a VUE project and a .NET framework project to unleash their full potential

React: the function is returning as undefined

TypeORM issue - UnsupportedDataTypeError

Removing undesired entries from a table view using AngularJs

Turn off client-side hydration in Nuxt.js or Prevent leaking raw data in Nuxt.js

Tips for showing only the date (excluding time) from a get operation in javascript (specifically using node js and mysql)

Error TS2322: Cannot assign a variable of type 'number' to a variable of type 'string'