remove everything (elements and text) after a given child element

Question

I am working in our Gmail extension right now, and given that the I have the parent Element and it looks something like below, I need to remove everything after <br clear="all" />, given that what is after may or may not exist given the users Gmail signature settings. Thoughts?

<div
    id=":93"
    class="Am Al editable LW-avf"
    hidefocus="true"
    aria-label="Message Body"
    g_editable="true"
    role="textbox"
    aria-multiline="true"
    contenteditable="true"
    tabindex="1"
    style="direction: ltr; min-height: 416px;">
    Test
    <br clear="all" />
    <div>
        <br />
    </div>
    -- <br />
    <div dir="ltr" class="m_-1358982132021700848m_4914548661371847332gmail_signature" data-smartmail="gmail_signature">
        <div dir="ltr">
            <b>Suzy Smith</b>
            <div>
                <i><a href="mailto:suzysmith@mail.com" target="_blank">suzysmith@mail.com</a></i>
            </div>
        </div>
    </div>
</div>

just remove all the next siblings. more info: https://stackoverflow.com/questions/4378784/how-to-find-all-siblings-of-currently-selected-object — anees, Feb 06 '19 at 21:56
@epascarello i think nextSiblingElement exposes the remove() method, but won't this approach just remove the next, I need to remove all of them. — Sandra Willford, Feb 06 '19 at 21:56

score 3 · Accepted Answer · answered Feb 06 '19 at 21:56

Just loop over the nextSibling and remove it.

var elem = document.querySelector('[clear="all"]')
while(elem.nextSibling) {
  elem.nextSibling.remove()
}
elem.remove()

<div
    id=":93"
    class="Am Al editable LW-avf"
    hidefocus="true"
    aria-label="Message Body"
    g_editable="true"
    role="textbox"
    aria-multiline="true"
    contenteditable="true"
    tabindex="1"
    style="direction: ltr; min-height: 416px;">
    Test
    <br clear="all" />
    <div>
        <br />
    </div>
    -- <br />
    <div dir="ltr" class="m_-1358982132021700848m_4914548661371847332gmail_signature" data-smartmail="gmail_signature">
        <div dir="ltr">
            <b>Suzy Smith</b>
            <div>
                <i><a href="mailto:suzysmith@mail.com" target="_blank">suzysmith@mail.com</a></i>
            </div>
        </div>
    </div>
</div>

remove everything (elements and text) after a given child element

1 Answers1