web-dev-qa-db-ja.com

jQuery LIにハイパーリンクを使用してULからLIを削除します

順不同リストがあります：

<ul id="sortable">
  <li id="1" class="ui-state-default">First <a href='#' title='delete' class="itemDelete">x</a></li>
  <li id="2" class="ui-state-default">Second <a href='#' title='delete' class="itemDelete">x</a></li>
  <li id="3" class="ui-state-default">Third <a href='#' title='delete' class="itemDelete">x</a></li>
</ul>

<li>から<ul>を削除したい。削除しようとするクラスitemDeleteのクリックイベントを処理しましたが、子が呼び出しているときに<li>を削除できないため、機能していないと思いますか？

$('.itemDelete').live("click", function() {
            var id = $(this).parent().get(0).id;


            $("#" + id).remove();

        });

最善のアプローチは何ですか？

javascriptjqueryjquery-ui
32
Jon

JQueryの最新バージョンを使用していると仮定します。

$('#sortable').on('click', '.itemDelete', function() {
    $(this).closest('li').remove();
});

closestはparentよりも少し動的です（parentはここでも機能します）。現在の要素に最も近いliを取得します。構造内。

62
Blixt

実際、現在のところ、idは未定義になります。liにはIDがないためです。

なぜしないのですか

$(this).parent().remove()

また、falseを返すことを忘れないでください。

8
helloandre

<li>sにIDがありません

単純にどうですか

$(this).parent().remove();
6
Greg

私にとってうまくいったこと：id属性の前に文字列またはアンダースコアを付ける（他の人が指摘したように）

JQuery Mobileのようなフレームワークでは、IDがすべてのページで一意である必要があるため（1ページだけでなく、ページ名、アンダースコア、データベースのレコードにアクセスできる数値IDをプレフィックスとして付けます。

クラスまたはulコントロールにバインドする代わりに、「on」を使用して親リストのliにバインドします。

    $('#sortable').on('dblclick', 'li'  function() {
        aval = $(this).attr('id').match(/\d+/g); // only want the numbers...
        id = aval[0];
        name = $(this).text(); // in case you need these for a post...
        li = $(this); // so we can remove it from the list after the 'this' object changes inside the ajax call...
        // make an ajax call to the server
        var jqxhr = $.post( "somepage.php", {name: name, id: id},
            function(data) {
            li.remove();
            $("#sortable").listview("refresh");
    },'json').fail(function() { alert("error"); });
    return false;   // preventDefault doesn't seem to work as well...
});
0
Gene