javascript - 如何使用 .removeChild() 删除具有不同 ID 的多个子元素？

Question

我正在构建一个 Towers of Hanoi 求解器。当用户单击带有数字的按钮时，我试图使 block 消失，即。当页面加载时有 10 个 block ，但当用户单击 8 按钮时，我希望删除两个最大的 block 。

HTML:

<div class="pillon-1">
  <div id="percent-100"></div><!--
  --><div id="percent-90"></div><!--
  --><div id="percent-80"></div><!--
  --><div id="percent-70"></div><!--
  --><div id="percent-60"></div><!--
  --><div id="percent-50"></div><!--
  --><div id="percent-40"></div><!--
  --><div id="percent-30"></div><!--
  --><div id="percent-20"></div><!--
  --><div id="percent-10"></div>
</div>

按钮的标记:

<button name="button" type="submit" id="btn-8" onclick="eightBlocks();">8</button>

我目前拥有但无法使其工作的 JS:

function eightBlocks() {
  const el = document.getElementsByClassName('pillon-1')[0, 1];
  el.removeChild(document.getElementById('percent-100 percent-90'));
  return false;
}

非常感谢任何帮助。

Answer 1

removeThisAfterTesting();
function removeThisAfterTesting(){
  var els = document.querySelectorAll("*[id^='percent-']");
  els.forEach(function(el){
    el.innerHTML = el.id;
  })
}

function eightBlocks() {
  document.getElementById('percent-90').remove();
  document.getElementById('percent-100').remove();
  return false;
}

Element.prototype.remove = function() {
  this.parentElement.removeChild(this);
}

<div class="pillon-1">
  <div id="percent-100"></div><!--
  --><div id="percent-90"></div><!--
  --><div id="percent-80"></div><!--
  --><div id="percent-70"></div><!--
  --><div id="percent-60"></div><!--
  --><div id="percent-50"></div><!--
  --><div id="percent-40"></div><!--
  --><div id="percent-30"></div><!--
  --><div id="percent-20"></div><!--
  --><div id="percent-10"></div>
</div>

<button name="button" type="submit" id="btn-8" onclick="eightBlocks();">8</button>