Hide div that contains specific text with JavaScript?

Javascript Web Development Object Oriented Programming

At first, you need to extract the extract the div class with the help of getElementsByClassName() and iterate over the for loop and use the OR condition to show the specific text.

Also, set yourDiv.style.display=’none’.

Following is the JavaScript code −

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="block">
header
</div>
<div class="block">
content
</div>
<div class="block">
footer
</div>
<script>
   let attribute = document.getElementsByClassName('block');
   for (let i = 0; i < attribute.length; i++) {
      let impDiv = attribute[i];
      let value = impDiv.innerHTML.trim();
      if (value == 'header' || value == 'footer') {
         impDiv.style.display = 'none';
      }
   }
</script>
</body>
</html>

To run the above program, save the file name anyName.html(index.html). Right click on the file and select the option open with live server in VS code editor.

Output

AmitDiwan

Updated on 16-Jul-2020 06:46:35

Previous Page Print Page Next Page