Hide div that contains specific text with JavaScript?

JavascriptWeb DevelopmentObject 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

raja
Published on 16-Jul-2020 10:15:51
Advertisements