Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Hide div that contains specific text with JavaScript?

Javascript Web Development Object Oriented Programming

In JavaScript, you can hide div elements containing specific text by using getElementsByClassName() to select elements, then iterating through them and checking their content. When a match is found, set the element's display style to 'none'.

Basic Approach

The process involves three main steps:

  • Get all div elements with a specific class
  • Loop through each element and check its text content
  • Hide matching elements by setting display: none

Example: Hide Divs with Specific Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Div Example</title>
</head>
<body>
    <div class="block">header</div>
    <div class="block">content</div>
    <div class="block">footer</div>
    <div class="block">main content</div>

    <script>
        let divElements = document.getElementsByClassName('block');
        
        for (let i = 0; i < divElements.length; i++) {
            let currentDiv = divElements[i];
            let textContent = currentDiv.innerHTML.trim();
            
            if (textContent === 'header' || textContent === 'footer') {
                currentDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>

Using Modern JavaScript (Alternative Method)

You can also use modern JavaScript methods like querySelectorAll() and forEach():

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Hide Div Example</title>
</head>
<body>
    <div class="content-block">Welcome</div>
    <div class="content-block">Hide me</div>
    <div class="content-block">Keep visible</div>
    <div class="content-block">Also hide me</div>

    <script>
        const textsToHide = ['Hide me', 'Also hide me'];
        
        document.querySelectorAll('.content-block').forEach(div => {
            if (textsToHide.includes(div.textContent.trim())) {
                div.style.display = 'none';
            }
        });
    </script>
</body>
</html>

Using textContent vs innerHTML

For better security and accuracy when checking plain text content, use textContent instead of innerHTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TextContent Example</title>
</head>
<body>
    <div class="item">Important Notice</div>
    <div class="item">Regular Content</div>
    <div class="item">Another Notice</div>

    <script>
        let items = document.getElementsByClassName('item');
        
        for (let item of items) {
            // Using textContent for plain text comparison
            if (item.textContent.trim().includes('Notice')) {
                item.style.display = 'none';
            }
        }
    </script>
</body>
</html>

Key Points

  • getElementsByClassName() returns a live HTMLCollection
  • Always use trim() to remove whitespace when comparing text
  • textContent is safer than innerHTML for plain text comparisons
  • Use includes() method for partial text matching
  • Modern browsers support querySelectorAll() with forEach()

Conclusion

Hiding divs with specific text is straightforward using JavaScript's DOM manipulation methods. Use getElementsByClassName() or querySelectorAll() to select elements, then check their content and set display: none to hide matching elements.

Updated on: 2026-03-15T23:18:59+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements