0

To Do アプリを作成していて、新しいページをレンダリングせずにアイテムを削除しようとしています。以下は、To-Do リストのコードです。

<ul id="unordered_list">
  <div class="to_do_list">
    <% @list.each_with_index do |list, i| %>
      <li data-index="<%= i %>">
        <%= link_to list.title, '#' %>
        <ol id="list_items_<%= i %>" class="hidden"></ol>
        <div delete-index="<%= i %>">
          <%= link_to "Delete", to_do_list_url(list), 
            :method => :delete, :remote => true %>
        </div>
      </li>
    <% end %>
  </div>
</ul>

私の質問は、削除ボタンをクリックしたときに AJAX を使用してアイテムを削除するにはどうすればよいですか? 私はこれをやろうとしました

$('#unordered_list').find('input:delete').on('ajax:success', function(event){
    $(event.currentTarget).parent().remove();
})

誰かが私が間違ったことを教えてもらえますか? クリックして削除するjQueryオブジェクトを取得しようとした方法は間違っていると思いますが、他の場所で解決策を見つけることができませんでした.

あなたの助けは大歓迎です!

4

1 に答える 1

3

いくつかのこと:

削除リンクのセレクターが間違っています - link_to がアンカータグを生成している間、入力を検索しています。

また、コールバック関数では、「this」を使用して、イベントをトリガーした要素 (リンク) を取得できます。

さらに、実際にはリスト項目を削除したい場合、「親」を呼び出すだけで最も近い親が取得されます。一致する要素が見つかるまで dom ツリーをたどる「最も近い」を使用する必要があります。

代わりにこれを使用できます：

$('#unordered_list li a').on('ajax:success', function(event){
    $(this).closest('li').remove();
})
于 2013-06-23T06:31:17.607 に答える