Question

I have a simple list and i need to remove style selected by clicking on firs element. Can someone provide some info?

HTML:

<ul id="select-list">
    <li value="null">All</li>
    <li value="1" class="selected">1</li>
    <li value="2" class="selected">2</li>
</ul>

CSS:

#select-list li{
   border: 1px solid #ECECEC;
      /* margin-left: -15px; */
    overflow-x: auto;
    font-size: 10px;
    padding: 2px;
    margin-bottom: 5px;
    cursor: pointer;
}

.selected{
  border: 1px solid red !important;
}

jQuery:

jQuery('#select-list li').click(function(){
        console.log(jQuery(this).siblings());

        if(jQuery(this).val() == 'null')
            jQuery(this).siblings('li').removeClass('selected')
    });

http://jsfiddle.net/nonamez/pKGcD/

Answer 1

You cannot use val() on an li – it only works for fields. I suggest adding a data-value attribute which can then be read using .data('value') – or more usefully in your case be used for an attribute selector: #select-list li[data-value="null"].

So:

<ul id="select-list">
    <li data-value="null">All</li>
    <li data-value="1" class="selected">1</li>
    <li data-value="2" class="selected">2</li>
</ul>

and:

jQuery('#select-list li[data-value="null"]').click(function(){
    jQuery(this).siblings('.selected').removeClass('selected')
});

Live example: http://jsfiddle.net/7QcwY/