CODEWITHSUNDEEP
javascriptjquery
user1451890
user1451890

Reputation: 1095

Removing the selected LI from a UL

I am trying to remove the selected item who class has "selected" but instead of just deleting the LI item, the entire list is being cleared out. I am using jQuery for this.

I've put together a quick fiddle:

http://jsfiddle.net/6QvvC/4/

<!DOCTYPE html>

<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="jquery.min.js"></script> 
<head>

<style type="text/css">
* {
    font-size: 9pt;
    font-family: Segoe UI;

}
#refdocs {
    border: 0;
    padding: 2px;
}
#box1 {
    border: 1px solid rgb(170,170,170);
    width: 200px;
}
#box2 {
    width: 100%;
    display: block;
    position: relative;
    border-bottom: 1px solid rgb(170,170,170);
}
#container {
    height: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
}
#list1 {
    width: 100%;
}
#list1 ul {
    margin: 0;
    padding: 0px;
    list-style-type: none;
}
#list1 li {
    cursor: default;
    padding: 2px;
}
.selected {
    background: rgb(228,228,228);
}
</style>

<script type="text/javascript">
window.onload = function() {

refresh_list()

}

function remove_selected_item() {

    if ( $('#list1 ul li').hasClass("selected") ) {

        alert("yup")
        $('#list1 ul li').remove()  
    }
    else {
        alert("nope")
    }
}


function refresh_list() {

    $('#list1 ul li').click(function () {
        $('#list1 ul li').removeClass('selected');
        $(this).addClass('selected');

        document.getElementById('refdocs').value = $(this).text()

    });

}
</script>

</head>

<body>

<div id="box1">
<div id="box2"><input type="text" id="refdocs"></div>
<div id="container">
    <div id="list1">
        <ul>
          <li>Coffee</li>
          <li>Tea</li>
          <li>Milk</li>
        </ul>
    </div>
</div>
</div>
<input type="button" value="delete" onclick="remove_selected_item()">

</body>

</html>

Upvotes: 0

Views: 6488

Answers (2)

jack_kerouac
jack_kerouac

Reputation: 1522

The jQuery selector #list1 ul li matches ALL li elements inside an ul inside an element with id list1. hasClass returns true if ANY of the matched elements contains the given class. remove removes all matched elements, which in the given case is all list elements. That is why the list is cleared.

Maybe dive into the power of jQuery selectors a bit: http://codylindley.com/jqueryselectors/ You can not only select elements based on their type or ID, but also on their class, their attributes, their position in the DOM (parents, siblings, children) and their state (e.g. hover).

When installing click handlers on list elements, the event delegation pattern is also pretty useful: https://learn.jquery.com/events/event-delegation/ It might help you to get a better understanding of how events and handler installation work with jQuery. It at least was some kind of revelation for me.

Upvotes: 1

dfsq
dfsq

Reputation: 193261

Function can be simplified: 

function remove_selected_item() {
    $('#list1 ul li.selected').remove()
}

You need to removed selected item - so you select the li with class .selected and just remove it.

Demo: http://jsfiddle.net/6QvvC/3/

Upvotes: 6

Related Questions