admin管理员组

文章数量:1399904

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:

/

<!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>

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/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>
  • javascript
  • jquery
Share Improve this question edited Mar 31, 2014 at 20:40 Rahil Wazir 10.1k11 gold badges44 silver badges65 bronze badges asked Mar 31, 2014 at 20:36 user1451890user1451890 1,0953 gold badges13 silver badges19 bronze badges 3
  • 1 Fiddle doesn't work in FF or Chrome for me... – Phlume Commented Mar 31, 2014 at 20:39
  • You need to select the No wrap - in <body> option from the second dropdown on the left. Otherwise the script is wrapped in a function. – sabof Commented Mar 31, 2014 at 20:44
  • Alternatively, define the function as window.remove_selected_item=function(){...}; to expose the function globally. – vol7ron Commented Mar 31, 2014 at 20:46
Add a ment  | 

2 Answers 2

Reset to default 6

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/6QvvC/3/

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./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./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.

本文标签： javascriptRemoving the selected LI from a ULStack Overflow

版权声明：本文标题：javascript - Removing the selected LI from a UL - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744183102a2594157.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。