使用 Javascript 从 HTML 中删除元素

Question

我正在使用后端系统，该系统不允许我编辑 HTML，但允许我在页面顶部或底部添加 javascript 或 HTML 和 CSS。

我的页面上有以下代码：

<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>

现在我要删除的元素是该列表中名为“ext_ui_dropdown_item ext_ui_dropdown_item--light”的第一个子元素（按类），但是，我不想删除整个列表，而只想删除第一个索引。我遇到的问题是，它们都以同一类命名，删除一个就会删除它们。有人可以帮忙吗？

我已经尝试过了

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

设置常量，然后尝试通过 HTML 集合删除它们，但现在让我感到困惑。

Answer 1

// Get the parent element
var parent = document.querySelector('.ext_ui_section_items');

// Get the first child element with the specified class
var elementToRemove = parent.querySelector('.ext_ui_dropdown_item.ext_ui_dropdown_item--light');

// Check if the element exists before attempting to remove it
if (elementToRemove) {
    // Remove the first element from a list
    parent.removeChild(elementToRemove);
}

<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>

参考： https://www.w3schools.com/jsref/met_node_removechild.asp