जावास्क्रिप्ट से विशिष्ट टेक्स्ट वाले div को कैसे छुपाएं?

परिचय

किसी विशिष्ट टेक्स्ट वाले div एलिमेंट को छुपाने के लिए, हम getElementsByClassName() का उपयोग करके एलिमेंट्स का चयन कर सकते हैं, उन पर पुनरावृति कर सकते हैं, और शर्त के आधार पर style.display = 'none' सेट कर सकते हैं।

उदाहरण

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Div छुपाएं</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"> हेडर </div> <div class="block"> कंटेंट </div> <div class="block"> फूटर </div> <script> const elements = document.getElementsByClassName('block'); for (let i = 0; i < elements.length; i++) { const div = elements[i]; const text = div.innerHTML.trim(); if (text === 'हेडर' || text === 'फूटर') { div.style.display = 'none'; } } </script> </body> </html>

आउटपुट

आधुनिक दृष्टिकोण (ES6+)

// Array.from के साथ कन्वर्ट करें
Array.from(document.getElementsByClassName('block'))
  .filter(el => el.innerHTML.trim() === 'हेडर' || el.innerHTML.trim() === 'फूटर')
  .forEach(el => el.style.display = 'none');

// या querySelectorAll के साथ
document.querySelectorAll('.block')
  .forEach(el => {
    const text = el.textContent.trim();
    if (text === 'हेडर' || text === 'फूटर') el.style.display = 'none';
  });

चलाने के निर्देश

उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल का नाम anyName.html (index.html) सेव करें। फ़ाइल पर राइट-क्लिक करें और VS कोड एडिटर में "Open with Live Server" विकल्प चुनें।