How to remove a pattern of table row elements from a table?

If I have the following table, which I can't manually touch, but can apply javascript to...

<table data="customTable">
  <tr>
    <td>item 1</td>
  </tr>
  <tr>
    <td height="10"></td>
  </tr>
  <tr>
    <td>item 2</td>
  </tr>
  <tr>
    <td height="10"></td>
  </tr>
</table>

...when the DOM loads fully, how can I remove every instance of <tr><td height="10"></td></tr> from the above table via jQuery or raw JavaScript? I don't need that row at all and its causing design issues for me. This is my first time trying to learn how to replace a full pattern of elements.
Hopefully, this is doable via JavaScript?

3 answers

  • answered 2019-08-14 18:12 gearsdigital

    This should do the trick.

    jQuery

    $('td[height="10"]').parent().remove();
    

    https://jsfiddle.net/uzv3fn2e/1/

    Vanilla JS

    Array.from(document.querySelectorAll('td[height="10"]')).forEach(td => td.parentNode.remove());
    

    https://jsfiddle.net/t7y6aqc5/

  • answered 2019-08-14 18:16 Nenad Vracar

    You can use :has() selector to select tr that has td with specific attribute

    $("tr:has(td[height='10'])").remove()
    

    $("tr:has(td[height='10'])").remove()
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table data="customTable">
      <tr>
        <td>item 1</td>
      </tr>
      <tr>
        <td height="10"></td>
      </tr>
      <tr>
        <td>item 2</td>
      </tr>
      <tr>
        <td height="10"></td>
      </tr>
    </table>

  • answered 2019-08-14 18:20 G.aziz

    without using jquery javascript has also remove()

    document.querySelectorAll("td").forEach(el => el.getAttribute("height") === "10" && el.parentNode.remove())
    <table data="customTable">
      <tr>
        <td>item 1</td>
      </tr>
      <tr>
        <td height="10"></td>
      </tr>
      <tr>
        <td>item 2</td>
      </tr>
      <tr>
        <td height="10"></td>
      </tr>
    </table>