Question

所以我在表格中有一组图片，当用户选择图片时，它会将该图片的ID添加到ul。如果用户取消选择图片，我将如何从ul中删除该项？

这是我到目前为止的代码

 $('td.n, td.p').click(function() {

    if ($(this).hasClass('done')) {
        $(this).removeClass('done');
        $('#order').remove('#id');

    } else {

        var p = $('.picked');
        if (p.length == -1) {
            $(this).addClass('picked');

        } else {
            if ($(p[0]).text() == $(this).text()) {
                $(this).addClass('done');
                $('.picked').addClass('done')

                    var lst = $(this).attr('id');
                    var ul = $('<ul/>');
                    for (var i = 0; i < 1; i++) {
                        var li = $('<li/>');
                        li.html(lst);
                        ul.append(li);
                    }
                    $('#order').append(ul);


            }

        }
    }

});

一些HTML

 <table>
            <tr>
                <td class='n' id='a1'><img src='seat_icon.jpg'/></td>
                <td class='n' id='a2'><img src='seat_icon.jpg'/></td>
                <td class='n' id='a3'><img src='seat_icon.jpg'/></td>
                <td class='n' id='a4'><img src='seat_icon.jpg'/></td>
                <td></td>
                <td class='n' id='a6'><img src='seat_icon.jpg'/></td>
                <td class='n' id='a7'><img src='seat_icon.jpg'/></td>
                <td class='n' id='a8'><img src='seat_icon.jpg'/></td>
                <td class='n' id='a9'><img src='seat_icon.jpg'/></td>
            </tr>
 </table

编辑：

如果我添加

 $('ul li').remove(lst);

它只删除整个列表。无论如何我可以删除一个项目？

添加了jsfiddle链接：

http://jsfiddle.net/xFvEx/1/

Answer 1

如果你想从dom（ul）中删除元素，只需使用.remove()

Answer 2

一种解决方案是在ul添加data时添加.data()变量，然后测试该var lst = $(this).attr('id'); var ul = $('<ul/>').data('text', lst); var ulexists = $('ul').filter(function () { return $(this).data('text') == lst; }); if (ulexists.length) { ulexists.remove(); } else { for (var i = 0; i < 1; i++) { var li = $('<li/>'); li.html(lst); ul.append(li); } $('#order').append(ul); }变量是否存在：

{{1}}

http://jsfiddle.net/mblase75/xFvEx/

Answer 3

这个方法应该可以解决问题，试着告诉我它是不是。

function deselect(id)
{
    $('#order').find('ul li').each(function(){
    if($(this).html()==id)
    {
        $(this).remove();
    }});
}

其中id是相关td的id。

Answer 4

我认为问题在于

$('#order').remove('#id');

用你删除id =“id”的元素，它是id =“order”bat的元素的后代，你没有在li上设置任何id。蝙蝠为什么这么复杂呢？试试这个

 $('td.n, td.p').click(function() {

     $(this).toggleClass('picked');

     var ids = $(".picked").map(function(){
         return $(this).attr('id');
     });

     var ul = $('<ul/>');
     for (var i = 0 ; i < ids.length  ; i++){
         ul.append($('<li/>').text(ids[i]));
     }
     $('#order').empty().append(ul);
});

在http://jsfiddle.net/wftMz/5/

上试用

一旦用户取消选择图片，如何从UL中删除项目

4 个答案: