Question

我正在尝试删除类已“选中”的所选项目，但不是仅删除LI项目，而是清除整个列表。我正在使用jQuery。

我把一个快速的小提琴放在一起：

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

Answer 1

功能可以简化：

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

您需要删除所选项目 - 因此您选择li类.selected，然后将其删除。

演示：http://jsfiddle.net/6QvvC/3/

Answer 2

jQuery选择器#list1 ul li匹配ID为li的元素内ul内的所有list1元素。如果任何匹配的元素包含给定的类，则hasClass返回true。 remove删除所有匹配的元素，在给定的情况下，它们都是列表元素。这就是清单清除的原因。

也许稍微深入了解jQuery选择器的强大功能：http://codylindley.com/jqueryselectors/ 您不仅可以根据类型或ID选择元素，还可以根据类别，属性，DOM中的位置（父母，兄弟姐妹，孩子）及其状态（例如悬停）来选择元素。

在列表元素上安装点击处理程序时，事件委托模式也非常有用：https://learn.jquery.com/events/event-delegation/它可以帮助您更好地理解事件和处理程序安装如何与jQuery一起使用。它至少对我来说是一种启示。

从UL中删除选定的LI

2 个答案:

演示：http://jsfiddle.net/6QvvC/3/