Question

我的2级菜单代码如下：

<ul class="nav nav-stacked navbar-fixed" id="side-menu">
    <li class="active ">
        <a href="index.html" data-toggle="tooltip" data-placement="bottom" title="Click here to go to home page">
            <i class="fa fa-home fa-fw"></i> Home 
            <span class="sr-only">(current)</span>
        </a>
    </li>

    <li class="">
        <a href="#" data-toggle="tooltip" data-placement="bottom" title="xyz">
            <i class="fa fa-users fa-fw"></i> Level 1
            <span class="destruct" style="float:right">X</span>
        </a>
    </li>

    <li class="nav-header">
        <a href="#" data-toggle="collapse" data-target="#comMenu">
            <i class="fa fa-cogs fa-fw"></i> Level 1
            <i class="fa fa-caret-down fa-fw"></i>
            <span class="destruct" style="float:right"> X </span>
        </a>

        <ul class="nav nav-second-level nav-stacked collapse " id="comMenu">
            <li>
                <a href="#">
                    <i class="fa fa-exchange fa-fw"></i> Level 2.1
                </a>
            </li>

            <li>
                <a href="#">
                    <i class="fa fa-download fa-fw"></i> Level 2.2
                </a>
            </li>

            <li>
                <a href="#">
                    <i class="fa fa-check-circle fa-fw"></i> Level 2.3
                </a>
            </li>
        </ul>
    </li>
<ul>

现在我想选择id=destruct的范围，该级别为1级，然后单击删除li中的整个html（包括第二级ul标记）。一旦点击菜单项和任何子菜单项删除，你必须得到我正在尝试制作"X"。

但是，我需要你帮助选择正确的元素。仅对于1级菜单，以下jQuery代码有效：

$(".destruct").click(function(e){
         $(this).parent().remove();
  });

什么是2级菜单的正确选择器？我尝试了一些选项，比如nth children和all，但似乎无法正确使用。

Answer 1

你有这个：li＆gt; a＆gt; span，所以如果你从span开始，你应该看看父级的父级，什么是最好的，搜索最接近的“li”（因为你可以在你的jquery代码中改变你的html里面的html结构）。随着html的更改（在所有级别添加x），您可以获得@Juan建议的内容：

<ul class="nav nav-stacked navbar-fixed" id="side-menu">
    <li class="active ">
        <a href="index.html" data-toggle="tooltip" data-placement="bottom" title="Click here to go to home page">
            <i class="fa fa-home fa-fw"></i> Home 
            <span class="sr-only">(current)</span>
        </a>
    </li>

    <li class="">
        <a href="#" data-toggle="tooltip" data-placement="bottom" title="xyz">
            <i class="fa fa-users fa-fw"></i> Level 1
            <span class="destruct" style="float:right">X</span>
        </a>
    </li>

    <li class="nav-header">
        <a href="#" data-toggle="collapse" data-target="#comMenu">
            <i class="fa fa-cogs fa-fw"></i> Level 1
            <i class="fa fa-caret-down fa-fw"></i>
            <span class="destruct" style="float:right"> X </span>
        </a>

        <ul class="nav nav-second-level nav-stacked collapse " id="comMenu">
            <li>
                <a href="#">
                    <i class="fa fa-exchange fa-fw"></i> Level 2.1
            <span class="destruct" style="float:right">X</span>
                </a>
            </li>

            <li>
                <a href="#">
                    <i class="fa fa-download fa-fw"></i> Level 2.2
            <span class="destruct" style="float:right">X</span>
                </a>
            </li>

            <li>
                <a href="#">
                    <i class="fa fa-check-circle fa-fw"></i> Level 2.3
            <span class="destruct" style="float:right">X</span>
                </a>
            </li>
        </ul>
    </li>
<ul>

$(function () {
  $(".destruct").click(function() {
         $(this).parent().parent().remove();//first option
         $(this).closest('li').remove();//best option
  });
});

工作示例：http://codepen.io/anon/pen/ZGaGby

关于子元素和父元素的JQuery基础知识

1 个答案: