前提・実現したいこと
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>
質問を読む限り、押せないボタンを作ろうとしているような気がしてならないのですが、これであっているのでしょうか?