Remove an element from HTML using Javascript [duplicate]

I am working from a backend system, which doesn’t allow me to edit the HTML but does allow me to add javascript or HTML And CSS in the top or bottom of the page.

I have the following code on the page:

<div class="ext_ui_section_items"><div class="ext_ui_dropdown_item ext_ui_dropdown_item--light"><a href="/user/approvals" tabindex="0" class="ext_ui_dropdown_item_anchor"><div class="ext_ui_dropdown_item_anchor_wrapper"><span class="ext_ui_dropdown_icon_wrapper"><!----></span> <span class="ext_ui_dropdown_item_text">
    Approvals
    </span> <span class="ext_ui_dropdown_item_suffix"><div data-v-2032d9d2="" data-ui-id="countValue" class="badge menu_style_light">
  0
</div></span></div></a></div> <div class="ext_ui_dropdown_item ext_ui_dropdown_item--light" data-ui-id="my-requests"><a href="/user/requests?reporter=ALL_REQUESTS" tabindex="0" class="ext_ui_dropdown_item_anchor"><div class="ext_ui_dropdown_item_anchor_wrapper"><span class="ext_ui_dropdown_icon_wrapper"><!----></span> <span class="ext_ui_dropdown_item_text">
    My requests
    </span> <span class="ext_ui_dropdown_item_suffix"><div data-v-2032d9d2="" data-ui-id="countValue" class="badge menu_style_light">
  0
</div></span></div></a></div></div>

Now the element I want to remove is the FIRST child element in that list named ‘ext_ui_dropdown_item ext_ui_dropdown_item–light’ by class, however, I do not want to remove the entire list, but just that first index. The issue I have is, that they are both named with the same class and removing one removes both of them. Can anyone help?

I have tried

 const parent = document.getElementsByClassName("ext_ui_section_items");
    const child = document.getElementsByClassName("ext_ui_dropdown_item ext_ui_dropdown_item--light");

setting the constants and then trying to remove them via the HTML collection, but it’s confusing me now.