如何通过JS的.hide方法实现点击按钮随机隐藏div且无残留空白

核心原理 #

visibility: hidden仅会让元素视觉不可见，仍会在文档流中占据原有空间，因此会留下空白。要消除空白需要将元素从渲染流中移除，可通过display: none实现。
注意：原生JavaScript没有内置的.hide() DOM方法，该方法是jQuery库提供的API，以下提供多种实现方案满足需求。

方案1：纯原生JS实现（无需引入额外库，推荐） #

直接操作display属性实现隐藏效果，不需要额外调用自定义方法：

function hide() {
  const cubes = document.getElementsByClassName('container');
  // 先将所有元素恢复显示
  for (let i = 0; i < cubes.length; i++) {
    cubes[i].style.display = 'block';
  }
  let hideCount = 0;
  // 随机选中90个不重复的元素隐藏
  while (hideCount < 90) {
    const randomIndex = Math.floor(Math.random() * cubes.length);
    if (cubes[randomIndex].style.display === 'block') {
      cubes[randomIndex].style.display = 'none';
      hideCount++;
    }
  }
}

方案2：实现.hide()方法调用（满足你要调用.hide的需求） #

先手动扩展DOM原型方法，即可直接调用.hide()：

// 扩展DOM元素的hide、show方法
Element.prototype.hide = function() {
  this.style.display = 'none';
};
Element.prototype.show = function() {
  this.style.display = 'block';
};

function hide() {
  const cubes = document.getElementsByClassName('container');
  // 先全部恢复显示
  for (let i = 0; i < cubes.length; i++) {
    cubes[i].show();
  }
  let hideCount = 0;
  while (hideCount < 90) {
    const randomIndex = Math.floor(Math.random() * cubes.length);
    if (cubes[randomIndex].style.display === 'block') {
      // 调用自定义的hide方法
      cubes[randomIndex].hide();
      hideCount++;
    }
  }
}

方案3：基于jQuery的.hide()实现 #

如果你项目中已经引入了jQuery，可以直接调用jQuery提供的.hide()方法：

function hide() {
  // 先全部显示
  $('.container').show();
  // 打乱元素顺序后取前90个隐藏
  const shuffled = $('.container').toArray().sort(() => Math.random() - 0.5);
  $(shuffled.slice(0, 90)).hide();
}

原有错误代码问题说明 #

1. 语法错误：for (var cubes){.hide(this);}不符合JS语法规范，既没有正确获取目标元素，也没有正确调用方法
2. 缺少重复判断逻辑：没有判断选中的元素是否已经被隐藏，可能会重复选中同一个元素，导致最终隐藏的元素数量不足90个
3. 方法不存在：原生JS没有内置.hide() DOM方法，未定义的情况下直接调用会抛出异常

内容的提问来源于stack exchange，提问作者miii