JQuery单击事件删除ul li元素

Question

我有一个UL LI列表，当用户单击LI时，将使用append在LI旁边显示一个按钮。 “选择”类也将分配给李。 当用户点击另一个LI时，应该删除先前的LI with按钮，并且该按钮将出现在新点击的LI上。但是我似乎无法删除prev LI的按钮。

我想只是从前面的李删除按钮，并保持按钮在新选择的LI。我怎样才能做到这一点？我的代码如下。

在此先感谢。

$("ul#optionList li").on("click", function(){ 
    var test= $(this).attr('id'); 
    $("ul#optionList li").removeClass('selected'); 
    $(this).addClass('selected'); 

    // append the button to the LI 
    $(this).append("<a href='javascript:void(0);' class='checkanswer2' id='"+test+"'>Check Answer</a>"); 

    $(this).children("a").remove(); // this will caused all the buttons to be removed, not just removing the previous selected LI 

}); 

Answer 1

与此

$("ul#optionList li").on("click", function(){ 
    var test= $(this).attr('id'); 
    $(this).siblings().removeClass('selected'); // remove other li class 
    $(this).addClass('selected'); // add class to clicked li 
    $(this).siblings().find("a").remove(); // remove other li a element 
    $(this).append("<a href='javascript:void(0);' class='checkanswer2' id='"+test+"'>Check Answer</a>"); 
}); 

DEMO

Answer 2

试试这个：

$("ul#optionList li").on("click", function(){ 
    var test= $(this).attr('id'); 
    $(".selected").find("a").remove(); 
    $("ul#optionList li").removeClass('selected'); 
    $(this).addClass('selected'); 
    $(this).children("a").remove(); // this will caused all the buttons to be removed, not just removing the previous selected LI 
    $(this).append("<a href='javascript:void(0);' class='checkanswer2' id='"+test+"'>Check Answer</a>"); 
}); 

Answer 3

下面的代码将尝试解决您的问题，

$("ul#optionList li").not(".selected").children("a").remove(); 

working sample

Answer 4

尝试这样做：

$('ul#optionList').find('.checkanswer2').remove(); // remove the other anchors 
$(this).append("<a href='javascript:void(0);' class='checkanswer2'..."); 

---

可以追加，请先删除与类名.checkanswer2锚。

---

这样的：

$("ul#optionList li").on("click", function(){ 
    var test= $(this).attr('id'); 
    $("ul#optionList li").removeClass('selected'); 
    $(this).addClass('selected'); 
    $('ul#optionList').find('.checkanswer2').remove(); // remove the other anchors 
    $(this).append("<a href='javascript:void(0);' class='checkanswer2' id='"+test+"'>Check Answer</a>"); 
    $(this).children("a").remove(); 
});