javascript - 根据其他父项删除另一个父项中的表行元素

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

如果你在文档加载时 Hook 它，这应该可以工作。

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>