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

Question

Before commenting this as duplicate please read clearly.

I have a table structure that looks like this:

          <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>

As you can see I have schedule that prints out schedule_day_table the 1 and 3, but never prints out 2 because there is no schedule at that time, but schedule_time_table always prints out all times.

What i am trying to achieve is I want to remove schedule_time_table tr element if there is only dot (.) in that schedule_day_table tr td i want to get output like this:

<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>

This must be done in JS in my case.

Answer 1

This should work if you hook it on document load.

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

How does it work?

First you need to select all table rows from 1st table, then you should iterate from these rows and find first nested td. If it's innerHTML is equal to "." you can remove this row with row.remove()