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

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

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

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

jQuery

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

Q&A

解決済

2回答

8809閲覧

Jqueryのセレクタに変数を使用したコード

pegy

総合スコア243

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/10/19 04:26

編集2017/10/19 04:40

下記のようにdiv class="factors"をダブルクリックすると#boxAと#box1が生成され
次に#boxAをクリックすると同じclass="ts"(イベントオブジェクトで取得したタイムスタンプ)で一致する
input class"ts" 要素を削除したいと考えております。

しかしながら書きように $('.'+tstrace2).romove();としても要素は削除されずに
logにもなにも表示されません。
原因が分かれば語狂喜いただけますでしょうか?

HTML

1<div class="factors">A<div> 2 3<div id="boxA"></div> 4<div id="box1"></div> 5 6$(function(){ 7 $('.factors').on('dblclick',function(e){ 8 var ts = e.timeStamp; 9 $("#boxA").append('<option class="opt '+ts+'"</option>'); 10 $("#box1").append('<input class="'+ts+'" type="hidden"name="seltaxA[]"'); 11 }); 12 13 14 $(function(){ 15 $(document).on('dblclick','.opt',function(){ 16 var tstrace=$(this).attr('class'); 17 var tstrace2=tstrace.slice(4);//optと空白を削除 18 19     $('.'+tstrace2).remove();//timestamp 20});

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

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

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

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

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

guest

回答2

0

ダブルクリックされた際のタイムスタンプをクラスとして追加しておられますが、クラスの使い方としてはふさわしくありません。jQueryのdataを使うほうがスマートかと思います。

javascript

1 2$(function(){ 3 $('.factors').on('dblclick',function(e){ 4 var ts = e.timeStamp; 5 $("#boxA").append('<option class="opt" data-timestamp="' + ts + '">' + ts + '</option>'); 6 $("#box1").append('<input data-timestamp="' + ts + '"type="hidden"name="seltaxA[]">'); 7 }); 8 9 $(document).on('dblclick','.opt',function(){ 10 var timestamp = $(this).data('timestamp'); 11 $('*[data-timestamp="' + timestamp + '"]').remove(); 12 }); 13});

動作サンプル
https://jsfiddle.net/dpqpbL14/

投稿2017/10/19 04:47

masaya_ohashi

総合スコア9206

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

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

pegy

2017/10/19 05:07

ご回答有難うございます。date()をはじめて知りました。何故classに設定するのに適切であるのか、少し詳しく調べてみます。
masaya_ohashi

2017/10/19 05:14

date(日付)じゃなくてdata(データ)ですよ。 補足しておくと、HTMLでのクラスの使い方は「◯◯としての性質を持っていることを表現」するのに使われます。例えば「text-center」というクラスを「文字列がセンタリングされる」と定義したり、「draggable」というクラスを「ドラッグできる」と定義したりするのに使います。そこにいきなり「1385.34710」という名前のクラスが現れるのはふさわしくないと考えるべきでしょう。"1385.34710"という文字列に意味があるわけではありませんしね。 データと要素を紐付けるのであれば、dataを使って「この要素はこういうデータを持っている」という形にしてしまう方がよいということです。
guest

0

ベストアンサー

$('.'+tstrace2).romove();//timestamp

"romove"ではなく"remove"では?

投稿2017/10/19 04:31

tkturbo

総合スコア5572

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

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

pegy

2017/10/19 04:41

ご指摘ありがとうございます。 また、自己解決ができたのですが、timeStampは小数点を含むため、そのままセレクタに使用した場合には正しく、要素が特定できないことが判明しました。イベントオブジェクトで他にユニークなもの又は小数点以下をsubstringで削除して試してみようと思います。 改めて御礼申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問