質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

14809閲覧

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

ssk

総合スコア332

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/05/23 06:04

編集2017/05/23 07:21

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

###動いているコード

javascript

1$("#sortable li").on('click',function(){ 2 $(this).detach(); 3 $(this).appendTo('#deleteList'); 4 5 $('#deleteList li').on('click',function(){ 6 $(this).detach(); 7 $(this).appendTo('#sortable'); 8 $("#sortable li").on('click',function(){ 9 $(this).detach(); 10 $(this).appendTo('#deleteList'); 11 }); 12 }); 13 });

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

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

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

javascript

1$(function() { 2 $("#sortable li").on('click',function(){ 3 $(this).detach(); 4 $(this).appendTo('#deleteList'); 5 }); 6 7 $('#deleteList li').on('click',function(){ 8 $(this).detach(); 9 $(this).appendTo('#sortable'); 10 }); 11 });

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

javascript

1$(function() { 2 $('#unList li').on('click',function(){ 3 $(this).remove(); 4 $('#sortable').append($(this).clone().addClass("ui-sortable-handle")); 5 }); 6 7 $("#sortable li").on('click',function(){ 8 $(this).remove(); 9 //$(this).appendTo('#unList'); 10 $('#unList').append($(this).clone().removeClass("ui-sortable-handle")); 11 }); 12 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2017/05/23 07:08

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

2017/05/23 07:16

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

2017/05/23 07:18

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

2017/05/23 07:20

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

2017/05/23 07:20

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

2017/05/23 07:22

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

2017/05/23 07:23

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

2017/05/23 07:28

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

2017/05/23 07:36

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

回答2

0

自己解決

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

javascript

1$(function() { 2 $('#unList').on('li','click',function(){ 3 $(this).remove(); 4 $('#sortable').append($(this).clone().addClass("ui-sortable-handle")); 5 }); 6 7 $("#sortable").on('li','click',function(){ 8 $(this).remove(); 9 $('#unList').append($(this).clone().removeClass("ui-sortable-handle")); 10 }); 11 });

投稿2017/05/23 07:37

編集2017/05/25 03:13
ssk

総合スコア332

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2017/05/23 07:43

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

2017/05/25 03:13

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

0

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

投稿2017/05/23 06:08

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ssk

2017/05/23 06:10

非表示にするだけではいけないのでしょうか? ↑要素ごと削除する必要があります。 場所を覚えておく ↑私もレベルでは難しそうなので、元の位置に戻す実装は後に回すことにします。
maisumakun

2017/05/23 06:14

「どのような理由で」要素ごと削除が必要なのでしょうか。 * トラバースのじゃまになる→見えている要素だけ工夫して取得しましょう * フォームが送信されてしまう→フォーム要素をdisabledとすることで解決します。
ssk

2017/05/23 06:27

最終的にajaxリクエストでDBに保存するために、form内の要素を取得するような仕様になっております。そのため、要素ごと削除する方が都合がよかったです。 非表示にする方向で進めて参ります。 上記コードですが、どのように整形すればいいのでしょうか、、
yambejp

2017/05/23 06:36

非表示にしたいタグにあらかじめ適当なclassをつけておいて、 ボタンのclickなどをトリガーにhide()で処理すればいいでしょう。 考え方にもよりますが、もしどうしても削除したいというのであれば 削除する前のオブジェクト全体をcloneしてとっておいて、 復元する際にオブジェクトを消してcloneをappendするとかで やることもできるかもしれません
ssk

2017/05/23 06:54

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問