Вопрос по javascript, jquery – удалить все <li> от <ul> ?

24

Я добавляюli вul используя следующий код:

for (var i = 1; i <= len; i++) {
    li = document.createElement('li');

    element = document.createElement("img");
    element.setAttribute("src", path[i]);

    li.appendChild(element);
    root.appendChild(li);
}

Теперь я хочу удалить все элементы из списка одним нажатием кнопки. Это то, что я использую, но это не работает:

while(root.hasChildNodes()){
    root.removeChild('li');
} 

Условие верно, но внутренняя линияroot.removeChild('li') не работает. Я также попробовал эти варианты:

root.removeChild(root li);
root.removeChild('#listid li');
root.removeChild('ul li');
...
Если это просто JS, почему JQuery тег? Tim Hobbs

Ваш Ответ

6   ответов
32

почему бы вам не воспользоваться его преимуществами?

добавление<li> элементы:

$("<li><img src='"+path[i]+"'></li>").appendTo(root);

удалить все<li> элементы:

$(root).empty();

удаление одного<li> элемент:

$("li:eq(3)",$(root)).remove();

и если вы используете raw js, вы можете использовать:

document.getElementById("root").innerHTML = "";
ты можешь научить меня JS и JQuery unkown
Вы можете найти примеры и полный список функций на Jquery.com. попробуйте примеры и поиграйтесь с функциями, чтобы узнать, что они делают. Taha Paksu
28

while( root.firstChild ){
  root.removeChild( root.firstChild );
}

jQuery только замедлит вас здесь.

@ tpaksu Некоторые версии IE не играют благоприятно при взаимодействии сinnerHTML метод таким образом.firstChild Удаление работает по всем направлениям, насколько мне известно. Sampson
помедленнее? он говорит о 10 тысячах элементов li? Taha Paksu
@ tpaksu Ненужные проходы через jQuery являются Ненужный. Вот немного конфеток: Jsperf.com / ListItem-удаление Sampson
@ tpaksu Это никогда не касалось скорости. Когда я сказал, что jQuery замедлит его, я не имел в виду работу браузера. Я имел в виду отсутствие каких-либо причин, чтобы пройти через jQuery для выполнения тривиальной задачи JavaScript. Что касаетсяinnerHTML, это тоже не столько проблема перфекта, сколько проблема совместимости. Различные браузеры (в прошлом) работали с этим членом по-разному. Sampson
@ tpaksu jQuery обрабатывает проблемы с компатом, когда вы его используете.elem.innerHTML не использует jQuery,$.html() делает. Sampson
14

the_ul_ID"). innerHTML = "";

4

Как насчет

    var ul = root;
    ul.innerHTML = '';
2
$('#button').on('click', function() {
    $(root).empty();
});
thnks Я использовал id для того, чтобы сделать список пустым, но с помощью переменной он работает, спасибо, что ты можешь многому научить меня js онлайн unkown
0

поскольку родные методы DOM (большинство из них в любом случае) не могут быть переданы в строки селектора так же, как методы jQuery.

var lis = root.getElementsByTagName("li");

for(var i = 0, il = lis.length;i<il;i++) {
    root.removeChild(lis[i]);
}

Похожие вопросы