javascript 要素を複数追加→追加した要素を配列処理

Every Qiita #6
のんびり独学初学者の毎日投稿チャレンジ 6日目
今回は・・・
自作コミュニティアプリ開発にて追加した複数要素に対して、指定した単体要素を操作した時の備忘録になります。

###要素を複数追加する(今回はinput)

index.js

const img_input = document.createElement("input");
img_input.type="text";
img_input.setAttribute("name","image[]");

####解説

1. createElementでinputタグを生成
2. 生成した要素は画像パスを保存するためtype="text"を付与
3. name属性を付与
4. **name="image[]"**とすることで、複数実行した時でもname属性が上書きされずサーバー側で配列として処理することができます。

###追加した要素を指定して処理する(今回はクリックした要素を削除処理）

index.js

const img_inputs = document.getElementsByClassName("img_input");
for (var i = 0; i<img_inputs.length; i++) {
  if(request.id == img_inputs[i].value){
    img_inputs[i].remove();
  }
}

####解説

1. request¹.id（今回は追加した画像パスをidに指定しました）
2. getElementsByClassNameで追加した要素のクラスをNodeList（javascriptの配列)で取得
3. request.id == img_inputs[i].valueで指定したid(画像パス)と追加したinput要素の値が一致した時にその要素を削除しています。

1. function del_img(request)→上記はこちらの関数内に記述していますので、クリックイベント関数の中にdel_img(this)で関数を呼ぶことで引数にクリックした要素を格納することができます。 ↩