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

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) => {&nbsp; //select first cell of the row&nbsp; let td = row.querySelector('td');&nbsp; if(td.innerHTML == ".") {&nbsp; &nbsp; &nbsp;row.parentNode.removeChild(row);&nbsp; &nbsp; &nbsp;timeRows[i].parentNode.removeChild(timeRows[i]);&nbsp; }});<td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table class="schedule_day_table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>1.</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><div>GO TO SCHOOL</div></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>.</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><div></div></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>3.</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><div>READ A BOOK</div></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table class="schedule_time_table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>08:30 - 09:15</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>09:25 - 10:10</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>11:30 - 12:15</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>

Answer 2

&nbsp; &nbsp; &nbsp; &nbsp;const scheduleDayTableRows = Array.from(document.querySelectorAll(".schedule_day_table tr"));&nbsp; &nbsp; &nbsp; &nbsp; scheduleDayTableRows.map((row) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (row.querySelector("td").innerHTML === ".") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; row.remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })它是如何工作的？首先，您需要从第一个表中选择所有表行，然后您应该从这些行中迭代并找到第一个嵌套的 td。如果它的innerHTML 等于“。” 您可以使用 row.remove() 删除此行