Getting repeated data with queryselectorAll

February 20, 2023

I have a paragraph in which i want to find the span tag with attribute data-f and get the remaining span tags and append them as child into the span tag with that attribute.

let para = <p style="text-align: left; border-width: 0.5pt; border-style: initial; border-color: rgb(0, 0, 0);">
    <span style="font-size: 10pt; font-family: 'Times New Roman';">
        <span data-f="63f309c7cc71a7ae90e40d3b" istextblock="false">Authorized share capital is&nbsp;<span data-f1="63f309c6cc71a7ae90e4098c" istextblock="false">unlimited</span></span>
    </span>
    <span style="font-size: 10pt; font-family: 'Times New Roman';">&nbsp;with&nbsp;no&nbsp;par value per Share. Shares issued and outstanding at March 31, 2022 were&nbsp;50,500,000&nbsp;and at December 31, 2021 were&nbsp;</span>
    <span style="font-size: 10pt; font-family: 'Times New Roman';"><span data-f1="63f309c6cc71a7ae90e409a4" istextblock="false">44,750,000</span></span>
    <span style="font-size: 10pt; font-family: 'Times New Roman';">. Net asset values per Share at March 31, 2022 and December 31, 2021 were $23.89&nbsp;and $22.24, respectively.</span>
</p>

Here is the code

const footnoteSpan = para.querySelector("span[data-footnote]");

const childSpans = Array.from(pTag.querySelectorAll("span")).filter((span) => span !== footnoteSpan && span.querySelector("span[data-footnote]") === null && span.textContent.trim() !== footnoteSpan.textContent.trim());
childSpans.forEach((span) => {
    footnoteSpan.appendChild(span.cloneNode(true));
    span.parentNode.removeChild(span);
});

this is the output i am getting

<p style="text-align: left; border-width: 0.5pt; border-style: initial; border-color: rgb(0, 0, 0); margin-top: 0pt; margin-bottom: 0pt;">
    <span style="font-size: 10pt; font-family: 'Times New Roman';">
        <span data-f="63f309c7cc71a7ae90e40d3b">
            Authorized share capital is&nbsp;<span data-fact="63f309c6cc71a7ae90e4098c">unlimited</span>
            <span style="font-size: 10pt; font-family: 'Times New Roman';">&nbsp;with&nbsp;no&nbsp;par value per Share. Shares issued and outstanding at March 31, 2022 were&nbsp;50,500,000&nbsp;and at December 31, 2021 were&nbsp;</span>
            <span style="font-size: 10pt; font-family: 'Times New Roman';"><span data-f1="63f309c6cc71a7ae90e409a4">44,750,000</span></span><span data-f1="63f309c6cc71a7ae90e409a4">44,750,000</span>
            <span style="font-size: 10pt; font-family: 'Times New Roman';">. Net asset values per Share at March 31, 2022 and December 31, 2021 were $23.89&nbsp;and $22.24, respectively.</span>
        </span>
    </span>
</p>

as you can see here that this is getting repeated for some reason

<span style="font-size: 10pt; font-family: 'Times New Roman';"><span data-f1="63f309c6cc71a7ae90e409a4">44,750,000</span></span><span data-f1="63f309c6cc71a7ae90e409a4">44,750,000</span>

Expected output

<p style="text-align: left; border-width: 0.5pt; border-style: initial; border-color: rgb(0, 0, 0); margin-top: 0pt; margin-bottom: 0pt;">
    <span style="font-size: 10pt; font-family: 'Times New Roman';">
        <span data-f="63f309c7cc71a7ae90e40d3b">
            Authorized share capital is&nbsp;<span data-fact="63f309c6cc71a7ae90e4098c">unlimited</span>
            <span style="font-size: 10pt; font-family: 'Times New Roman';">&nbsp;with&nbsp;no&nbsp;par value per Share. Shares issued and outstanding at March 31, 2022 were&nbsp;50,500,000&nbsp;and at December 31, 2021 were&nbsp;</span>
            <span style="font-size: 10pt; font-family: 'Times New Roman';"><span data-f1="63f309c6cc71a7ae90e409a4">44,750,000</span></span>
            <span style="font-size: 10pt; font-family: 'Times New Roman';">. Net asset values per Share at March 31, 2022 and December 31, 2021 were $23.89&nbsp;and $22.24, respectively.</span>
        </span>
    </span>
</p>

>Solution :

p > span

const footnoteSpan = document.querySelector("span[data-footnote]");

const childSpans = Array.from(document.querySelectorAll("p > span")).filter((span) => span !== footnoteSpan && span !== footnoteSpan.parentNode);
childSpans.forEach((span) => {
  footnoteSpan.appendChild(span.cloneNode(true));
  span.parentNode.removeChild(span);
});

<p style="text-align: left; border-width: 0.5pt; border-style: initial; border-color: rgb(0, 0, 0);">
  <span style="font-size: 10pt; font-family: 'Times New Roman';">
        <span data-footnote="63f309c7cc71a7ae90e40d3b" istextblock="false">Authorized share capital is&nbsp;<span data-fact="63f309c6cc71a7ae90e4098c" istextblock="false">unlimited</span></span>
  </span>
  <span style="font-size: 10pt; font-family: 'Times New Roman';">&nbsp;with&nbsp;no&nbsp;par value per Share. Shares issued and outstanding at March 31, 2022 were&nbsp;50,500,000&nbsp;and at December 31, 2021 were&nbsp;</span>
  <span style="font-size: 10pt; font-family: 'Times New Roman';"><span data-fact="63f309c6cc71a7ae90e409a4" istextblock="false">44,750,000</span></span>
  <span style="font-size: 10pt; font-family: 'Times New Roman';">. Net asset values per Share at March 31, 2022 and December 31, 2021 were $23.89&nbsp;and $22.24, respectively.</span>
</p>