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

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

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

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

Q&A

1回答

498閲覧

jQueryでフォーカスが当たった最後のボタンを削除したい

study_m

総合スコア24

jQuery

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

0グッド

0クリップ

投稿2018/04/05 11:37

編集2022/01/12 10:55

前提・実現したいこと

jQueryを使って下記を実現したいです。

①動的にDOMにボタンを追加したい(新規作成ボタン)
②新規作成ボタンを押下するごとに、新規ボタンを作成したい
③作成したボタンの最後のボタンにフォーカスが当たったら、フォーカスが当たった最後のボタンを削除したい

※フォーカスが当たったのが最後のボタンでないときは、フォーカスを外したい
※htmlにもともとボタンを追加するのではなく動的に要素を追加したい
※②はdocumentではなく新規ボタン作成をidとして指定したい
※onイベントではなくclick,focusイベントで実現したい

特定のボタンにフォーカスを当てて削除はできましたが、最後のボタンを判定する方法が分からないので教えていただけと幸いです。

button.js

var num = 0; //ページロード時に最初に動く処理 $(document).ready(function () { //ボタンHTML作成 $('body').append('<div class="btnArea"><input class="addBtn" type="button" id="button1" value="新規ボタン作成" /></div>'); }); $(document).click(function(){ num++; var addHtml = '<div class="btnAreaChild"><input class="addBtnChild" type="button" value="ボタン" id = "addBtnChildId"/></div>'; //実際に新規ボタンを作成 var newBtn = $(".btnArea").append(addHtml); var id = num; console.log(id); // var focusBtn =$("#"+num).focus().attr("id"); //id名を個別に設定 $("#addBtnChildId").attr("id",num); var focus3 =$("#3").focus(); if(focus3){ $("#2").remove("input"); } }); //フォーカスを当てたidがnumと同じだったら if(focusBtn == num){ $("#3").remove(); }

htmlファイル

<html> <head> <script src="jquery-3.3.1.min.js"></script> <script src="button.js"></script> </head> <body> <h2>ボタン作成画面</h2> </body> </html>

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

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

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

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

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

x_x

2018/04/06 03:10

質問を読む限り、押せないボタンを作ろうとしているような気がしてならないのですが、これであっているのでしょうか?
guest

回答1

0

一応、これも読んでおいてもらって

5.必ずアルファベットから開始する。(数字から開始しない)

数字から開始しているid・class名は、認識されません。

もう少し「何をクリック」「何をフォーカス」を明示されたほうが
後々規模が大きくなってきたときに混乱しなくなるのではと思います。

.last()で「グループ的に最後の要素」が取得できるので、それを使います。


サンプルコード削除しました。
質問内容は「最後のボタンを判定する方法が分からない」とのことでしたので、
ひとまず回答をヒントにやってみて、できたら履歴を見て答え合わせしてみてください。
(書き方はあくまで例なのでこれが全てではありません)

投稿2018/04/06 01:34

編集2018/04/06 01:42
m.ts10806

総合スコア80765

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問