Iterate for sibling elements and filter out specific elements at the same time

I have the following html which I can’t modify because its being dynamically generated by a third party company I’m working with…

<table id="mytable">
<tbody>
<tr>
  <td><font>data A</font></td>
</tr>
<tr>
  <td><font>data B - Title</font></td>
</tr>
<tr>
  <td><font>data B - Content</font></td>
</tr>
<!--THERE'S LIKE 65 OF THESE HIDDEN INPUT FIELDS GENERATED ON PAGE...-->
<input type="hidden" name="inpA" value>
<input type="hidden" name="inpB" value>
<input type="hidden" name="inpC" value>
<input type="hidden" name="inpD" value>
<input type="hidden" name="inpE" value>
<input type="hidden" name="inpF" value>
<!--....-->
<tr>
  <td><font>data C - Title</font></td>
</tr>
<tr>
  <td><font>data C - Content</font></td>
</tr>
<tr>
  <td><font>data D - Title</font></td>
</tr>
<tr>
  <td><font>data D - Content</font></td>
</tr>
</tbody>
</table>

I’m using a do while loop to iterate through a table for sibling elements. But I want my do while loop to exclude the input sibling elements. How can I "skip" over them?

//my specific areas to target in my table.  I will add more selectors to this eventually...
let mTitles = document.querySelectorAll('#mytable tr:nth-of-type(2) > td:nth-child(1) font');
for (let i = 0, len = mTitles.length; i < len; i++) {
  
  //get the closest parent target element to help track other sibling elements
  let mParent = mTitles[i].closest('tr');
  
  //Focusing on the first selector...
  if (i == 0) {
    //lets test our first selector data
    console.log(`our parent element: ${mParent.nodeName}`);
    console.log(`whats inside our parent elment: ${mParent.innerHTML}`);
    
    //if the next sibling element is not null...
    if (mParent.nextElementSibling != null) {
        //loop through the rest of the sibling elements and capture them
      let nextSibling = mParent;
      let n = 0;
      do {
        n = n + 1;
        console.log(nextSibling.nextElementSibling.innerHTML);
        nextSibling = nextSibling.nextElementSibling;
      } while(n < 11); //set the range of sibling elements to consider in our loop   
    }
  }
}

As you can see when you run this in code pen, the gap between data B and data C….

I just want to remove that gap (i.e. exclude the input elements). How can I improve my logic to get to my goal?

You can see it action here – https://codepen.io/kensleylewis/pen/bGodoQW

Many thanks!

>Solution :

You just need to check the content of innerHTML and do a console.log only if the string length > 0 or if the string is !== "".

if (nextSibling.nextElementSibling.innerHTML !== "") {
  console.log(nextSibling.nextElementSibling.innerHTML);
}

//my specific areas to target in my table.  I will add more selectors to this eventually...
const mTitles = document.querySelectorAll('#mytable tr:nth-of-type(2) > td:nth-child(1) font');
for (let i = 0, len = mTitles.length; i < len; i++) {
  //get the closest parent target element to help track other sibling elements
  const mParent = mTitles[i].closest('tr');

  //Focusing on the first selector...
  if (i === 0) {
    //lets test our first selector data
    console.log(`our parent element: ${mParent.nodeName}`);
    console.log(`whats inside our parent element: ${mParent.innerHTML}`);

    //if the next sibling element is not null...
    if (mParent.nextElementSibling !== null) {
      //loop through the rest of the sibling elements and capture them
      let nextSibling = mParent;
      let n = 0;
      do {
        n++;
        const nextInnerHTML = nextSibling.nextElementSibling.innerHTML;
        if (nextInnerHTML !== '') {
          console.log(nextSibling.nextElementSibling.innerHTML);
        }
        nextSibling = nextSibling.nextElementSibling;
      } while (n < 11);
    }
  }
}

<table id="mytable">
  <tbody>
    <tr>
      <td>
        <font>data A</font>
      </td>
    </tr>
    <tr>
      <td>
        <font>data B - Title</font>
      </td>
    </tr>
    <tr>
      <td>
        <font>data B - Content</font>
      </td>
    </tr>
    <!--THERE'S LIKE 65 OF THESE HIDDEN INPUT FIELDS GENERATED ON PAGE...-->
    <input type="hidden" name="inpA" value>
    <input type="hidden" name="inpB" value>
    <input type="hidden" name="inpC" value>
    <input type="hidden" name="inpD" value>
    <input type="hidden" name="inpE" value>
    <input type="hidden" name="inpF" value>
    <!--....-->
    <tr>
      <td>
        <font>data C - Title</font>
      </td>
    </tr>
    <tr>
      <td>
        <font>data C - Content</font>
      </td>
    </tr>
    <tr>
      <td>
        <font>data D - Title</font>
      </td>
    </tr>
    <tr>
      <td>
        <font>data D - Content</font>
      </td>
    </tr>
  </tbody>
</table>