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.