Блог

Я создал таблицу с несколькими флажками, и я хочу создать JavaScript, который удалит те, которые мне там не нужны, но я застрял в части JavaScript. Не могли бы вы, пожалуйста, помочь мне в этой небольшой задаче? Спасибо!

 <table class="isTable">
        <tbody>
            <tr>
                <td>
                    <input id="firstCheckBox" type="checkbox" name="number1" value="All">
                    <label for="firstCheckBox">All</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="secondCheckBox" type="checkbox" name="number2" value="Some text">
                    <label for="secondCheckBox">Some text</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="thirdCheckBox" type="checkbox" name="number3" value="1st to be removed">
                    <label for="thirdCheckBox">1st to be removed</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="fourthCheckBox" type="checkbox" name="number4" value="Some other text">
                    <label for="fourthCheckBox">Some other text</label>
                </td>
            <tr>
                <td>
                    <input id="fifthCheckBox" type="checkbox" name="number5" value="2nd to be removed">
                    <label for="">2nd to be removed</label>
                </td>
            <tr>
                <td>
                    <input id="fifthCheckBox" type="checkbox" name="number6" value="Some other text again">
                    <label for="">Some other text again</label>
                </td>
            <tr>
                <td>
                    <input id="sixthCheckBox" type="checkbox" name="number7" value="3rd to be removed">
                    <label for="">3rd to be removed</label>
                </td>
            </tr>
        </tbody>
    </table>
  

Часть JS выполнена до сих пор, но способ, которым я пытался удалить tr , не работает

 let findTableOfCheckBoxes = document.getElementsByClassName('.isTable');
        for (let i = 0; i < findTableOfCheckBoxes.length; i  ) {
            let selectTr = document.getElementsByTagName("tr")[2];
            selectTr.parentNode.removeChild(selectTr);
        }
  

Вы совершаете главный грех, предполагая, что ваш селектор находит элементы. Это не так, потому что вам isTable не нужно .isTable при использовании getElementsByClassName() which, поскольку речь идет о классах, предполагает . для вас.

Существует также более современный и чистый способ добиться того, что вам нужно. Следует:

 document.querySelectorAll('.isTable').forEach(tbl => {
    let row = tbl.querySelector('tr:nth-child(3)');
    row amp;amp; row.remove();
});
  

Вы добавили символ «.» для getElementsByClassName . Просто удалите его.

let findTableOfCheckBoxes = document.getElementsByClassName('isTable');

 let findTableOfCheckBoxes = document.getElementsByClassName('isTable');
for (let i = 0; i < findTableOfCheckBoxes.length; i  ) {
  let selectTr = document.getElementsByTagName("tr")[2];
  selectTr.parentNode.removeChild(selectTr);
}  

 <table class="isTable">
  <tbody>
    <tr>
      <td>
        <input id="firstCheckBox" type="checkbox" name="number1" value="All">
        <label for="firstCheckBox">All</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="secondCheckBox" type="checkbox" name="number2" value="Some text">
        <label for="secondCheckBox">Some text</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="thirdCheckBox" type="checkbox" name="number3" value="1st to be removed">
        <label for="thirdCheckBox">1st to be removed</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="fourthCheckBox" type="checkbox" name="number4" value="Some other text">
        <label for="fourthCheckBox">Some other text</label>
      </td>
      <tr>
        <td>
          <input id="fifthCheckBox" type="checkbox" name="number5" value="2nd to be removed">
          <label for="">2nd to be removed</label>
        </td>
        <tr>
          <td>
            <input id="fifthCheckBox" type="checkbox" name="number6" value="Some other text again">
            <label for="">Some other text again</label>
          </td>
          <tr>
            <td>
              <input id="sixthCheckBox" type="checkbox" name="number7" value="3rd to be removed">
              <label for="">3rd to be removed</label>
            </td>
          </tr>
  </tbody>
</table>