如何使用.removeChild（）刪除具有不同ID的多個子元素？

Question

我正在構建河內塔求解器。 當用戶單擊帶有數字的按鈕時，我正在嘗試使這些塊消失。 當頁面加載時有10個塊，但是當用戶單擊8按鈕時，我希望刪除兩個最大的塊。

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> 

Answer 2

 function eightBlocks() { var $container = document.querySelector('.pillon-1') var $removable1 = document.querySelector('.pillon-1 #percent-100') var $removable2 = document.querySelector('.pillon-1 #percent-90') if ($removable1) $container.removeChild($removable1) if ($removable2) $container.removeChild($removable2) } 

 .pillon-1 { display: flex; flex-direction: column; } .pillon-1 div { width: 200px; height: 40px; background-color: red; border: 1px solid white; } 

 <div class="pillon-1"> <div id="percent-100">100</div><!-- --><div id="percent-90">90</div><!-- --><div id="percent-80">80</div><!-- --><div id="percent-70">70</div><!-- --><div id="percent-60">60</div><!-- --><div id="percent-50">50</div><!-- --><div id="percent-40">40</div><!-- --><div id="percent-30">30</div><!-- --><div id="percent-20">20</div><!-- --><div id="percent-10">10</div> </div> <button name="button" type="submit" id="btn-8" onclick="eightBlocks();">8</button>