Question

我正在尝试从ol中删除li元素，然后将新的li元素放回其中。我知道听起来它应该是一个相当简单的任务，使用.empty（）和.append（），但是......

当我不尝试删除我的li元素时，输入工作正常。当我试图清除它时，要么没有删除任何东西，输入正常工作或一切都被删除，我根本无法输入任何东西。我查看了JQuery文档，我认为我误解了使用.empty（）或其他方法之一......

HTML：

<input id="btn-add" type="submit" />
<ol id='listOfStuff'>
<!-- elements are inserted here -->
</ol>

JQuery的：

$(document).ready(function(){
function addToList(thing1, number1){
$('#listOfStuff').append('<li>'+thing1+' - '+number1+'</li>');}

function printList(){ //Clear the data, then reprint it
//What I think is the main problem: 
$('#listOfStuff').children.remove();//stops the input if I use it
$('#listOfStuff').empty(); //has no effect if I use it
$('#listOfStuff').clear(); //does what it should--not what I'm looking for, however
$('#listOfStuff').detatch();//stops input if I use it

addToList("Things", 42);}

$('#btn-add').click(function(){
//... 
//Other stuff which works just fine and isn't part of this question 
//...    
printList();
    }

});

编辑：添加小提琴。 http://jsfiddle.net/z6LqX/1/

Answer 1

我不认为你是误会，你提到了正确的方法。由于您提供了几个不同的示例，我无法分辨您实际尝试过或正在尝试做什么：

empty清除所有子HTML元素。对于ol，它会擦除所有li s

append添加了一个新的dom元素，因此您正确使用它

$('#listOfStuff').append('<li>Text 1</li>');
$('#btn-add').click(function(e){
    $('#listOfStuff').empty();
});

Fiddle

Answer 2

这会对你有帮助吗？

function addToList(thing1, number1)
{
    $('#listOfStuff').append('<li>' + thing1 + ' - ' + number1 + '</li>');
}

function clearList()
{
    $('#listOfStuff').empty();
}

$('#btn-add').click(function()
{
    clearList();
    addToList("Things", 42);
});

fiddle

清空<ol>并在JQuery中重新填充</ol>

2 个答案: