Удаление выбранного LI из UL

0

Я пытаюсь удалить выбранный элемент, который класс "выбрал", но вместо простого удаления элемента LI весь список очищается. Для этого я использую jQuery.

Я собрал быструю скрипку:

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>
  • 1
    Скрипка не работает в FF или Chrome для меня ...
  • 0
    Вам нужно выбрать опцию No wrap - in <body> во втором раскрывающемся No wrap - in <body> слева. В противном случае скрипт обернут в функцию.
Показать ещё 1 комментарий
Теги:

2 ответа

6
Лучший ответ

Функция может быть упрощена:

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

Вам нужно удалить выбранный элемент - так что вы выбираете li с классом .selected и просто удаляете его.

Демо: http://jsfiddle.net/6QvvC/3/

Поделиться
  • 1
    Или сначала оптимизирован с идентификатором: $('#list1').find('ul li.selected').remove()
  • 0
    @ Martijn Это интересный вопрос, на самом деле я не уверен, будет ли он более оптимальным. Позвольте мне сделать тест на перфорирование ..
Показать ещё 5 комментариев
1

Селектор jQuery #list1 ul li соответствует всем элементам li внутри ul внутри элемента с идентификатором list1. hasClass возвращает true, если ANY из согласованных элементов содержит данный класс. remove удаляет все согласованные элементы, которые в данном случае являются всеми элементами списка. Вот почему список очищается.

Возможно немного погрузиться в мощь селекторов jQuery: http://codylindley.com/jqueryselectors/ Вы можете не только выбирать элементы на основе их типа или идентификатора, но также и их класса, их атрибутов, их позиции в DOM (родители, братья и сестры, дети) и их состояние (например, зависание).

При установке обработчиков кликов в элементах списка шаблон делегирования событий также очень полезен: https://learn.jquery.com/events/event-delegation/ Это может помочь вам лучше понять, как работают события и обработчик с помощью JQuery. Это, по крайней мере, было для меня некоторым откровением.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню