根据其他父级删除另一个父级中的表格行元素

Question

在将其评论为重复之前，请仔细阅读。我有一个看起来像这样的表结构：          <td>              <table class="schedule_day_table">                  <tr>                      <td>1.</td>                      <td><div>GO TO SCHOOL</div></td>                  </tr>                  <tr>                      <td>.</td>                      <td><div></div></td>                  </tr>                  <tr>                      <td>3.</td>                      <td><div>READ A BOOK</div></td>                  </tr>              </table>          </td>          <td>              <table class="schedule_time_table">                  <tr><td>08:30 - 09:15</td></tr>                  <tr><td>09:25 - 10:10</td></tr>                  <tr><td>11:30 - 12:15</td></tr>              </table>          </td>如您所见，我有时间表打印出 schedule_day_table 1 和 3，但从不打印出 2，因为当时没有时间表，但 schedule_time_table 始终打印出所有时间。我想要实现的是，如果 schedule_day_table tr td 中只有点 (.)，我想删除 schedule_time_table tr 元素，我想得到这样的输出：<td>              <table class="schedule_day_table">                  <tr>                      <td>1.</td>                      <td><div>GO TO SCHOOL</div></td>                  </tr>                  <tr>                      <td>3.</td>                      <td><div>READ A BOOK</div></td>                  </tr>              </table>          </td>          <td>              <table class="schedule_time_table">                  <tr><td>08:30 - 09:15</td></tr>                  <tr><td>11:30 - 12:15</td></tr>              </table>          </td>在我的情况下，这必须在 JS 中完成。

Answer 1

如果您将它挂在文档加载上，这应该可以工作。

const dayRows = document.querySelectorAll('.schedule_day_table tr');

const timeRows = document.querySelectorAll('.schedule_time_table tr');

dayRows.forEach((row, i) => {

  //select first cell of the row

  let td = row.querySelector('td');

  if(td.innerHTML == ".") {

     row.parentNode.removeChild(row);

     timeRows[i].parentNode.removeChild(timeRows[i]);

  }

});

<td>

              <table class="schedule_day_table">

                  <tr>

                      <td>1.</td>

                      <td><div>GO TO SCHOOL</div></td>

                  </tr>

                  <tr>

                      <td>.</td>

                      <td><div></div></td>

                  </tr>

                  <tr>

                      <td>3.</td>

                      <td><div>READ A BOOK</div></td>

                  </tr>

              </table>

          </td>

          <td>

              <table class="schedule_time_table">

                  <tr><td>08:30 - 09:15</td></tr>

                  <tr><td>09:25 - 10:10</td></tr>

                  <tr><td>11:30 - 12:15</td></tr>

              </table>

          </td>

Answer 2

       const scheduleDayTableRows = Array.from(document.querySelectorAll(".schedule_day_table tr"));

        scheduleDayTableRows.map((row) => {

            if (row.querySelector("td").innerHTML === ".") {

                row.remove();

            }

        })

它是如何工作的？

首先，您需要从第一个表中选择所有表行，然后您应该从这些行中迭代并找到第一个嵌套的 td。如果它的innerHTML 等于“。” 您可以使用 row.remove() 删除此行