javascript 動的フォームの追加、削除について

質問

JAVASCRIPTを使って、追加ボタンを押したときに、入力フォーム（textbox）を2個、3個と追加させ、入力フォーム横に設置した削除ボタンで削除ボタン横の入力フォームを削除したいと思っております。

1)delInput2()の引数でボタンごとの情報（何番目のボタンか）を渡したい。

どのようなjavascriptを書けばよいか、ご教授願えませんでしょうか。
どうぞよろしくお願い致します。

<script type="text/javascript">

var arInput = 0;
var Default = arInput;

function addInput() { //追加処理
arInput ++
$("#area").append('<span id=\"group'+arInput+'\"><input type=\"text\" name=\"text'+arInput+'\" value=\"入力項目'+arInput+'\" /><input type=\"button\" onclick=\"delInput2()\" name=\"button'+arInput+'\" value=\"削除'+arInput+'\" /><br></span>\n');
}

function delInput() { //削除処理
$("#group"+arInput).remove();
if(arInput > Default){
arInput --
}
}

function delInput2() { //指定項目削除処理

}
</script>
<form>
<fieldset id="area">
<fieldset>
<input type="button" onclick="addInput()" value="一行追加" />
<input type="button" onclick="delInput()" value="一行削除" />
</fieldset>
</form>

回答No.1

nobuoka · ベストアンサー

どういうことがしたいのかわかりづらいのですが、おそらくこういうことを実現したいのですよね？
http://www.vividcode.info/sample/090817a.xhtml

それであれば、「削除ボタン」 の onclick 属性で delInput2 を呼び出すようにするのではなく、addEventListener メソッドを使って delInput2 をイベントリスナに追加し、delInput2 への引数として渡ってくる Event オブジェクトの currentTarget プロパティを参照してどのボタンが押されたのかを調べると良いと思います。

それから質問する時に組み込みではないメソッドや関数、オブジェクトなどを使用するときはそれらに関して説明を付け加えるべきですよ。 (今回の例の場合はグローバル関数 $ について説明すべきです。)

お礼

nobuokaさん、大変ありがとうございました！！
質問の仕方や内容が悪いのに、希望通りの回答をしてもらい大変助かりました！！