CODEWITHSUNDEEP
javascriptjquerycsshtml
BobbyJones
BobbyJones

Reputation: 1354

Cannot remove selected class from UL LI list

My jQuery code doesn't appear to be working. Perhaps a fresh set of eyes can take a look over for me. I am failing at attempting to remove the previous classname "selected" once a new LI item has been clicked on. However, in the pic below, it seems to not be working:

enter image description here

Here is the jQuery Code in question:

<script type="text/javascript">

$(document).ready(function() {

    $(".field_arrow").click(function() {

        $(".field_list").css("display", "block");

    });

    $(".field_list li").click(function(e) {

        var select = $(this).closest('.field_list')

        select.find("ul li").removeClass('selected');

        $(this).addClass('selected');

    });

}); 
</script>

Here is the HTML Markup:

<!DOCTYPE html>
<html>
<head>

<script src="jquery.min.js" type="text/javascript"></script>

<style type="text/css">
* {
    font-size: 9pt;
    font-family: Segoe UI;
}
.field_container {
    border: 1px solid rgb(170,170,170);
    width: 177px;
}
.field_wrapper {
    float: left;
}
.field_arrow {
    background:url(arrow.png) no-repeat scroll right center;
    width:20px;
    margin-top: 1px;
}
.field_arrow:hover {
    cursor: pointer;
}
.field {
    border: 0;
    width: 150px;
    padding: 2px;
}
.field_list {
    list-style:none;
    margin: 0;
    display: none;
    border-top: 1px solid rgb(170,170,170);
    margin-top: 5px;
    padding: 1px;
}
.field_list li {
    cursor: pointer;
    padding: 2px;
}
.field_list li:hover {
    background: red;
}
.selected {
    background: blue;
    color: #FFF
}
</style>

<script type="text/javascript">

$(document).ready(function() {

    $(".field_arrow").click(function() {

        $(".field_list").css("display", "block");

    });

    $(".field_list li").click(function(e) {

        var select = $(this).closest('.field_list')

        select.find("ul li").removeClass('selected');

        $(this).addClass('selected');

    });

}); 
</script>

<div class="field_container">

    <div class="field_wrapper"><input type="text" class="field"></div>

    <div class="field_arrow"></div>

    <ul class="field_list">
        <li>Apples</li>
        <li>Oranges</li>
        <li>Bananas</li>
    </ul>


<div>

</body>
</html>

Upvotes: 0

Views: 531

Answers (2)

DinoMyte
DinoMyte

Reputation: 8858

You can simply do this using siblings() since you are trying to remove class selected from rest of the li and apply it to the current one..

$(this).siblings().removeClass('selected');
$(this).addClass('selected');

Here's an example : http://jsfiddle.net/mj1u0qa2/

Upvotes: 1

AtheistP3ace
AtheistP3ace

Reputation: 9691

field_list is the ul so you don't need the ul selector when finding the lis inside it. Try this:

select.find("li").removeClass('selected');

And if you only have one li selected at once you can just find the single one that currently has the class like this instead of attempting to remove the class from every li when only one will have it at a time:

select.find(".selected").removeClass('selected');

Upvotes: 3

Related Questions