使用jQuery显示和隐藏特定的列表元素

Question

I have below code, i need to hide last list item

<div id="addUpdateFruit" style="display: none;">
        <ul class="list Box Design" id="listBox">
                <li>
                    <ul>
                        <li class="label" id="TypeLabel">Type:</li>
                        <li><select name="newTypeId" id="newTypeId">
                                <option selected="selected" value="">Please Select</option>
                        </select></li>
                    </ul>
                </li>
                <li>   // Now want to hide only this
                    <ul>
                        <li class="label" id="FruitLabel">Fruit:</li>
                        <li><select name="newFruitId" id="newFruitId" class="required">
                                <option selected="selected" value="">Please Select</option>
                        </select></li>
                    </ul>
                </li>
                <li>                                                               // Want to hide this
                    <ul>
                        <li class="label">Juice Type:</li>
                        <li><select name="Juice"  class="required" >   
                            <option value="1">MIlk Shake</option>
                            <option value="2">Normal</option>
                        </select></li>
                    </ul>
                </li>

        </ul>
</div>  

To do this, i used below codes

$('ul li:gt(2)').show();

and this

    var list = document.getElementById("listBox");    
    if (list.style.display == "none"){
        list.style.display = "block";
    }

Nothing seem working

How to hide or show Juice Type list item.Please help me on this

I want like this: where second list item is not shown

Type: |______drop down___________|
Juice Type: |______drop down___________|

Answer 1

To achieve this you can amend your jQuery selector to use :last :

$('ul.listBox > li:last').hide();

Or preferably you could just use CSS:

ul.listBox > li:last-child { display: none; }

 ul.listBox > li:last-child { display: none; } 

 <div id="addUpdateFruit"> <ul class="listBox" id="listBox"> <li> <ul> <li class="label" id="TypeLabel">Type:</li> <li> <select name="newTypeId" id="newTypeId"> <option selected="selected" value="">Please Select</option> </select> </li> </ul> </li> <li> <ul> <li class="label" id="FruitLabel">Fruit:</li> <li> <select name="newFruitId" id="newFruitId" class="required"> <option selected="selected" value="">Please Select</option> </select> </li> </ul> </li> <li> <ul> <li class="label">Juice Type:</li> <li> <select name="Juice" class="required"> <option value="1">MIlk Shake</option> <option value="2">Normal</option> </select> </li> </ul> </li> </ul> </div> 

Answer 2

这应该工作

$('ul li:nth-of-type(2)').hide();

$('ul li:last-of-type').hide();