要素の削除と復元について

Question

javascript初学者です。
以下のコードで動くようにはなったのですが、非常に不恰好です。助言いただけないでしょうか？

###動いているコード

$("#sortable li").on('click',function(){
		$(this).detach();
		$(this).appendTo('#deleteList');

		$('#deleteList li').on('click',function(){
			$(this).detach();
			$(this).appendTo('#sortable');
			$("#sortable li").on('click',function(){
				$(this).detach();
				$(this).appendTo('#deleteList');
			});
		});
	});

###やりたいこと
1.要素を削除
2.削除した要素を元に戻す
3.戻された要素も削除できるようにする
4.（できれば）戻す位置を削除した時の位置へ

###上記コードでできている範囲
1,2,3はできていますが、4はできていません。
.after()や.before()を使うとできるようですが、参考になるサイトがなく、困っています。

###補足
上記コードをスッキリさせるために、以下を試しました。
しかし、1はできても2以降ができません。

$(function() {
		$("#sortable li").on('click',function(){
			$(this).detach();
			$(this).appendTo('#deleteList');
		});

		$('#deleteList li').on('click',function(){
			$(this).detach();
			$(this).appendTo('#sortable');
		});
	});

###追記
以下のようなコードにして試してみました。
要素は非表示になるのですが、#sortableに要素が追加されません。

$(function() {
		$('#unList li').on('click',function(){
			$(this).remove();
			$('#sortable').append($(this).clone().addClass("ui-sortable-handle"));
		});

		$("#sortable li").on('click',function(){
			$(this).remove();
			//$(this).appendTo('#unList');
			$('#unList').append($(this).clone().removeClass("ui-sortable-handle"));
		});
	});

Comments

[Lhankor_Mhy]

補足願います。『削除した時の位置』の定義をください。たとえば、ABCDとあり、ACD→AD→Dと削除したとして、Bはどこへ戻すのでしょうか。元あった2番目に戻して、DBですか？　それとも順番を維持してBDですか？

[ssk]

できれば、BDにしたいです。

[Lhankor_Mhy]

であれば順番が変動しないのですから、ナンバリングをしておいて復元した時にソートをかければ済むのでは。

[ssk]

あ、なるほど！事前に番号をふっておいて、戻す時にソートをかけてあげればできそうですね。

[ssk]

しかし、根本の問題で追記のコードでうまく動かず、、、、

[ssk]

#unList→#sortableはうまくいくんですが、逆が動作しません。

[ssk]

#unList→#sortable、#sortable→#unListをできるようにしたいです。

[Lhankor_Mhy]

remove()メソッドを使った時点でイベントは壊れてると思います。デリゲートでイベント設定してみてください。

[ssk]

delegateを利用して実装することができました。ありがとうございます。ソートは後程、実装いたします。助かりました＞＜

Answer 1

Lhankor_Mhy様の助言を参考に実装したコードです。

$(function() {
		$('#unList').on('li','click',function(){
			$(this).remove();
			$('#sortable').append($(this).clone().addClass("ui-sortable-handle"));
		});

		$("#sortable").on('li','click',function(){
			$(this).remove();
			$('#unList').append($(this).clone().removeClass("ui-sortable-handle"));
		});
	});

Comments

[Lhankor_Mhy]

delegateメソッドは3.0で削除されていますので、onメソッドでデリゲートイベントを設定した方がいいかと思います。

[ssk]

ありがとうございます。
onメソッドを利用する形に変更致しました。

Answer 2

非表示にするだけではいけないのでしょうか？
いずれにしても場所を覚えておくには前後のタグのどちらかに
特定の属性をのこしておくか、もとあった場所に適当なタグで
痕跡を残すしかないでしょう

Comments

[ssk]

非表示にするだけではいけないのでしょうか？
↑要素ごと削除する必要があります。

場所を覚えておく
↑私もレベルでは難しそうなので、元の位置に戻す実装は後に回すことにします。

[maisumakun]

「どのような理由で」要素ごと削除が必要なのでしょうか。

* トラバースのじゃまになる→見えている要素だけ工夫して取得しましょう
* フォームが送信されてしまう→フォーム要素をdisabledとすることで解決します。

[ssk]

最終的にajaxリクエストでDBに保存するために、form内の要素を取得するような仕様になっております。そのため、要素ごと削除する方が都合がよかったです。

非表示にする方向で進めて参ります。
上記コードですが、どのように整形すればいいのでしょうか、、

[yambejp]

非表示にしたいタグにあらかじめ適当なclassをつけておいて、
ボタンのclickなどをトリガーにhide()で処理すればいいでしょう。

考え方にもよりますが、もしどうしても削除したいというのであれば
削除する前のオブジェクト全体をcloneしてとっておいて、
復元する際にオブジェクトを消してcloneをappendするとかで
やることもできるかもしれません

[ssk]

情報を追記致しました。
hide()で実装してみたのですが、#sortableにappendされていないようです。どこが間違っているのでしょう、、