Remove 3 checkboxes from a table

Question

I created a table with some checkboxes and I want to create a JavaScript that remove the ones I don't want there but I'm stuck in the JavaScript part. Could you please help me in this small challenge? Thanks!

<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>

The JS part done so far, but the way I tried to removed the tr doesn't work

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

Answer 1

You added "." character for the getElementsByClassName. Just remove it.

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>

Answer 2

You're committing the cardinal sin of assuming your selector is finding elements. It's not, because you need isTable not .isTable when using getElementsByClassName() which, since it's about classes, assumes the . for you.

There's also a more modern, cleaner way to achieve what you need. Follows:

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