javascripthtmljquery-selectorsqueryselector

In Javascript, how can I querySelector to get the innerHTML excluding one of the inner sibling divs

I have the following html:

<body>
    <span class="comment">
        EXAMPLES:
        <p><i>Example 1</i> - <a href="https://example.com/1">https://example.com/1</a> - Jan 2020 (2 comments)</p>
        <p><i>Example 2</i> - <a href="https://example.com/2">https://example.com/2</a> - Jun 2022 (13 comments)</p>
        <div class="reply"><p><u><a href="reply?id=12323" rel="nofollow">reply</a></u></p></div>
        <p><i>Example 3</i> - <a href="https://example.com/3">https://example.com/3</a> - Apr 2023 (33 comments)</p>
    </span>
</body>

I am trying to get the innerHTML of the .comment class except the .reply div.

Note that the .reply class is not guaranteed to be the last.

Basically, I want to get just:

EXAMPLES:
<p><i>Example 1</i> - <a href="https://example.com/1">https://example.com/1</a> - Jan 2020 (2 comments)</p>
<p><i>Example 2</i> - <a href="https://example.com/2">https://example.com/2</a> - Jun 2022 (13 comments)</p>
<p><i>Example 3</i> - <a href="https://example.com/3">https://example.com/3</a> - Apr 2023 (33 comments)</p>

I am unable to figure out how I can exclude one of the sibling children.

I know I can get the children except the .reply class using the following:

document.querySelectorAll(`.comment > :not(.reply)`)

But this isn't the innerHTML. It's a NodeList:

enter image description here

Is there a way to get a new combined element from this NodeList on which I can then call innerHTML on?

I found a slight similar question here:

Javascript .innerHTML but excluding inner div

but that question is about extracting a specific string and solutions seem ugly. Is there a better way?

Solution

  • Make a deep clone of the comment node and remove the reply node before retrieving the innerHTML:

    var comment = document.querySelector(".comment").cloneNode(true);
comment.querySelector(".reply").remove();
console.log(comment.innerHTML);
    <span class="comment">
  EXAMPLES:
  <p><i>Example 1</i> - <a href="https://example.com/1">https://example.com/1</a> - Jan 2020 (2 comments)</p>
  <p><i>Example 2</i> - <a href="https://example.com/2">https://example.com/2</a> - Jun 2022 (13 comments)</p>
  <div class="reply"><p><font size="1"><u><a href="reply?id=12323" rel="nofollow">reply</a></u></font></p></div>
  <p><i>Example 3</i> - <a href="https://example.com/3">https://example.com/3</a> - Apr 2023 (33 comments)</p>
</span>

    Note I added the missing closing </font> tag to your example. Without that, the unmatched opening <font> would remain in the innerHTML.