jquery - 如何使用 css 或 jquery 定位 optgroup 的第一个 child

Question

有没有办法定位标记为“投资组合”并显示名称“主要”的 optgroup 的第一个子项？

我需要将其从仅显示在移动菜单中(它不显示在桌面菜单中)中删除。这是一个 Wordpress 主题菜单，菜单小部件无法访问。菜单是由媒体查询触发的 mobilemenu.js 创建的(我猜)。它通过 2 个不同的名称/菜单项显示主页。我希望只针对那个菜单项并使用 css display:none 或 jQuery getElementByID 解决方案，但到目前为止还没有成功。在这个问题上我有点头疼，因为我似乎无法瞄准它。任何帮助将不胜感激!

<div class="mobilenavi">
  <select id="mm0" class="mnav" style="display: inline-block;">
    <option value="undefined">Click here:</option>
    <option value="http://somedomain.com/">Home</option>
    <optgroup label="Portfolios">
      <option value="#">Main</option>
      <option value="http://somedomain.com/portfolio-1/">Portfolio 1</option>
      <option value="http://somedomain.com/portfolios/portfolio-2/">Portfolio 2</option>
      <option value="http://somedomain.com/portfolios/portfolio-3/">Portfolio 3</option>
      <option value="http://somedomain.com/portfolios/beach-portfolio/">Beach Portfolio</option>
      <option value="http://somedomain.com/portfolios/photos/">Photos</option>
    </optgroup>
    <option value="http://somedomain.com/contact/">Contact Kim</option>
  </select>
</div>

Answer 1

这种 CSS 方法适用于某些浏览器:

Example Here

optgroup[label="Portfolios"] option:first-child {
    display:none;
}

---

正如@canon 指出的那样，display:none 并非在所有浏览器中都有效。

如果你想用 jQuery 删除它，使用:

Example Here

$('optgroup[label="Portfolios"] option:first-child').remove();

或者，如果您想要纯 JS 方法:

Example Here

var el = document.querySelector('optgroup[label="Portfolios"]');
el.removeChild(el.getElementsByTagName('option')[0]);