根據其他父級刪除另一個父級中的表格行元素

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() 刪除此行