javascript - ユーザーが写真の選択を解除した後にアイテムを UL から削除する方法

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);

リスト全体を削除するだけです。とにかく、1つのアイテムを削除できますか？

jsfiddle リンクを追加しました:

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

Answer 1

1つの解決策は、変数が追加さ.data()れたときに変数を追加しul、その変数の存在をテストすること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);
            }

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

Answer 2

この方法でうまくいくはずです。うまくいかない場合は教えてください。

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

ここで、idは関連するtdのIDです。

Answer 3

問題はにあると思います

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

これにより、liにidを設定しなかったid="order"バットを持つ要素の子孫であるid="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/で試してみてください

Answer 4

dom (ul) から要素を削除したい場合は、単に.remove()を使用します