JavaScript

追加や削除のできるフォームを作る【appendChild・removeChild】【JavaScript】

この記事ではJavaScriptで追加や削除のできるフォームを作ります。

appendChild()とremoveChild()を使います。

appendChildでフォームを追加する」の応用編の記事です。

追加や削除のできるフォームを作るデモ

デモ

フォームの追加をクリックすると、新しくフォームと削除ボタンが追加されます。

削除ボタンをクリックすると、セットのフォームも削除されます。

サンプルコード

inputとbuttonをcreateElement()で生成し、appendChild()で要素を追加しています。

フォームの削除は、buttonのonclickイベントにて発火します。

削除対象に該当するidのフォームとボタンをremoveChild()によって削除しています。

var i = 1 ;
function addForm() {
  var input_data = document.createElement('input');
  input_data.type = 'text';
  input_data.id = 'inputform_' + i;
  input_data.placeholder = 'フォーム-' + i;
  var parent = document.getElementById('form_area');
  parent.appendChild(input_data);

  var button_data = document.createElement('button');
  button_data.id = i;
  button_data.onclick = function(){deleteBtn(this);}
  button_data.innerHTML = '削除';
  var input_area = document.getElementById(input_data.id);
  parent.appendChild(button_data);

  i++ ;
}

function deleteBtn(target) {
  var target_id = target.id;
  var parent = document.getElementById('form_area');
  var ipt_id = document.getElementById('inputform_' + target_id);
  var tgt_id = document.getElementById(target_id);
  parent.removeChild(ipt_id);
  parent.removeChild(tgt_id);	
}
<div id="form_area">
  <input type="text" id="inputform_0" placeholder="フォーム-0">
  <button id="0" onclick="deleteBtn(this)">削除</button>
</div>
<input type="button" value="フォーム追加" onclick="addForm()">
input {
  display: block;
  margin-top: 10px;
}

分かりづらいポイントは、cleateElement()でbuttonを生成した後、onclickに関数を追加する方法です。

下記のような書き方で追加できます。

var button_data = document.createElement('button');
button_data.onclick = function(){deleteBtn(this);}


以上、追加や削除のできるフォームを作るデモでした。

createElement()appendChild()は必須ですね。それらについて詳しく知りたい方は、「appendChild()の使い方とデモ【JavaScript】」「createElement()の使い方・デモ【JavaScript】」をご覧ください。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-,

© 2020 ウェブつく Powered by AFFINGER5