Ẩn div chứa văn bản cụ thể với JavaScript

Cách ẩn các phần tử div (hoặc bất kỳ element nào) chứa văn bản cụ thể bằng JavaScript thuần (Vanilla JS) - không cần jQuery.

Ví dụ minh họa

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ẩn div theo nội dung</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
    .block { padding: 15px; margin: 10px 0; background: #f0f0f0; border-radius: 4px; }
    .hidden { display: none !important; }
  </style>
</head>
<body>
  <h1>Ẩn div chứa text cụ thể bằng JavaScript</h1>
  <div class="block">header</div>
  <div class="block">content</div>
  <div class="block">footer</div>
  <div class="block">sidebar</div>
  <button id="hideBtn">Ẩn header và footer</button>
  <button id="showBtn">Hiện tất cả</button>
  
  <script>
    // Lấy tất cả element có class 'block'
    const blocks = document.getElementsByClassName('block');
    
    // Ẩn header và footer
    document.getElementById('hideBtn').addEventListener('click', () => {
      for (let i = 0; i < blocks.length; i++) {
        const div = blocks[i];
        const text = div.innerHTML.trim();
        if (text === 'header' || text === 'footer') {
          div.style.display = 'none';
          // Hoặc dùng class: div.classList.add('hidden');
        }
      }
    });
    
    // Hiện lại tất cả
    document.getElementById('showBtn').addEventListener('click', () => {
      for (let i = 0; i < blocks.length; i++) {
        blocks[i].style.display = 'block';
      }
    });
  </script>
</body>
</html>

Kết quả

Ban đầu hiển thị 4 div: header, content, footer, sidebar.

Khi nhấn "Ẩn header và footer": Chỉ còn content và sidebar.

Khi nhấn "Hiện tất cả": Hiện lại 4 div.

Cách tiếp cận hiện đại hơn (ES6+):

// Dùng querySelectorAll + forEach
const blocks = document.querySelectorAll('.block');

document.getElementById('hideBtn').addEventListener('click', () => {
  blocks.forEach(div => {
    const text = div.textContent.trim();
    if (['header', 'footer'].includes(text)) {
      div.hidden = true; // Thuộc tính HTML5 hidden
      // Hoặc div.style.display = 'none';
    }
  });
});

// Hoặc dùng filter + forEach
[...blocks].filter(div => ['header', 'footer'].includes(div.textContent.trim()))
          .forEach(div => div.hidden = true);

Các cách ẩn element:

Khuyên dùng: el.hidden = true hoặc CSS class cho code sạch, semantic.