使用 JavaScript 隐藏 html div答案

【问题标题】：Hide a html div with JavaScript使用 JavaScript 隐藏 html div
【发布时间】：2015-12-07 19:17:59
【问题描述】：

我有一个这样的 div：

<div class="radio-wrapper content-box__row " data-gateway-group="direct" data-select-gateway="34434244"> SOME CODE HERE </div>

我想通过元素 data-select-gateway 用 javascript 隐藏这个 div。例如，如果 data-select-gateway 为 34434244，则隐藏 div。

【问题讨论】：

【解决方案1】：

您可以使用以下代码隐藏第一个：

document.querySelectorAll('[data-select-gateway="34434244"]')[0].style.display = 'none';

对于所有带有data-select-gateway="34434244"的元素：

elems = document.querySelectorAll('[data-select-gateway="34434244"]');
for (var i = 0; i < elems.length; i++)
  elems[i].style.display = 'none';

对于所有这些，只需data-select-gateway：

elems = document.querySelectorAll('[data-select-gateway]');
for (var i = 0; i < elems.length; i++)
  elems[i].style.display = 'none';

【讨论】：

【解决方案2】：

如果您想隐藏 DIV 并保持页面的外观，例如让 DIV 仍然占据高度和宽度以不影响其他元素的放置，则设置可见性：隐藏而不是显示：无。

document.querySelectorAll('[data-select-gateway="34434244"]')[0].style.visibility = 'hidden';

【讨论】：