- ベストアンサー
jQueryでフォーム追加・削除
- jQuery初心者のため、フォームの追加・削除がうまくいかない状況です。
- 追加ボタンを押すとフォームが一つ追加され、削除ボタンを押すと一番最後のフォームが削除される仕様です。
- フォームの追加・削除に関するjQueryのコードが提供されていますが、「削除ボタンがうまく働いてくれない」という問題が発生しています。
- errorman
- お礼率58% (30/51)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
同様のご質問が過去にもたくさんあるみたいなので、検索してみると参考になるかと思います。 ご質問文にある目標の内容を元に、よくわからないので、少々適当ですが… * スクリプトで必要/不要なHTMLのidを追加/削除しています。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #form1 div.mo input{ margin:5px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <div> <input type="button" id="addbtn" value="追加"> <input type="button" id="delete" value="一つ削除" disabled> </div> <form action="#" method="post" id="form1"> <div class="mo"> <input type="text" name="sasa_1" value=""> </div> <p><input type="submit" value="確定"> </form> <script type="text/javascript"> $("#addbtn, #delete").click(function(){ var inp = $("input", "#form1").filter(function(){ return /^sasa_\d+$/.test($(this).attr("name")); }); var n = inp.length; var last = $(inp.get(n-1)).parent(); if(this.id === "addbtn"){ n++; last.after('<div class="mo"><input type="text" name="sasa_' + n + '" value=""></div>'); } else { last.remove(); n--; } $("#addbtn").attr("disabled", n>14?"deiabled":""); $("#delete").attr("disabled", n>1?"":"disabled"); }); </script> </body> </html>
