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

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 元素，我想像这样得到 output：

<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();
            }
        })

它是如何工作的？

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