用 JavaScript 隐藏 html div

Question

我有一个 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.

Answer 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';

Answer 2

如果您想隐藏 DIV 并保持页面的外观，例如让 DIV 仍然占据高度和宽度以不影响其他元素的放置，然后设置 visibility:hidden 而不是 display:none.

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

Hide a html div with JavaScript