要素を追加、削除したい

Question

追加ボタン、削除ボタンそれぞれクリックすると
要素とテキストボックスがそれぞれ、追加、削除されるようにしたい

//動かしたい要素
<div class="drag-and-drop"  id="target"  style="top:1;left:0px;background-color:#ffa500;">要素A</div>

//追加ボタン
<input type="button"  value="追加">
//削除ボタン
<input type="button"  value="削除">

<form method="post" action="" >
  <p>
    <input type="text" placeholder="アイコンの名前" name="icon">
  </p>
  <p>
  要素A
    <input type="text" value="クリックしてね☆" name="zahyou">
  </p>

　//送信
  <p>
  <input type="submit" value="次へ" name="send">
  </p>

Comments

[m.ts10806]

質問は何でしょうか。
やりたいこととコードだけ出されてもなにを答えてほしいのか誰にも伝わりませんよ

[yambejp]

ちょっと詰め込み過ぎで何をしたいのか伝わってきませんが
何をすると「追加」と「削除」がされる想定でしょうか？
（いまのところテキストボックスと次へボタンしか見当たりませんが）
仮に追加されるときはキャプション（要素xx）はどうするのでしょうか？

[m.ts10806]

質問は何でしょうか。
やりたいこととコードだけ出されてもなにを答えてほしいのか誰にも伝わりませんよ。

現在のおけるコードの問題点、要件も詳細に「文章で説明」してください。

[m.ts10806]

「コード見せればわかる」のはあくまで仕様を把握している前提です。課題の出題者やプロジェクトのリーダー、メンバーなど。
回答者は赤の他人です。仕様を知っているのは質問者しかいません。
であればそこを丁寧に説明するしかアドバイスを得る手段はありません。

[minomonnta]

追加ボタン　削除ボタンを押すことで「動かしたい要素」「テキストボックス」(今回のコードの場合は要素A)を追加、削除できるようにしたいです。
今の自分の知識ではどちらか片方しか動かせないので、複数個を同時に追加、削除をしたいです

[yambejp]

追加すると要素Aと表示されたものが次々にできていいのですね？
複数個を指定するUIはどういったものを想定していますか？
追加は数字を入力して実行したとして、削除はどれを削除するか指定しないと
複数処理はできないとおもいますけど

[minomonnta]

要素Aと表示されたものが次々に出てくるという認識で大丈夫です。
クリックで要素を指定してそれをボタンで削除などと考えています。
まだ考えだけでやり方は思いついていませんが

Answer 1

追加ボタン　削除ボタンを押すことで「動かしたい要素」「テキストボックス」(今回のコードの場合は要素A)を追加、削除できるようにしたいです。
今の自分の知識ではどちらか片方しか動かせないので、複数個を同時に追加、削除をしたいです

本質的な問題は前質問と同じですので、前質問の全回答を再読して下さい。
https://teratail.com/questions/225839

問題「追加ボタンに対応する追加位置を絶対指定する場合、ボタンの数だけイベントハンドラを用意しなければ、私のスキルでは実装出来ない」

解決方法は前回答の通り、マップを用意するか、相対位置指定することです。
https://developer.mozilla.org/ja/docs/Web/API/Node

• 追加ボタンと追加位置の対応マップを用意する
• 追加ボタンに対応する相対位置(親/子.兄/弟)に追加する

Re: minomonnta さん

Answer 2

まずはこんな感じから

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#add').addEventListener('click',e=>{
    var target=e.target;
    var clone=document.querySelector('.drag-and-drop').cloneNode(true);
    target.parentNode.insertBefore(clone,target);
  });
  document.querySelector('#del').addEventListener('click',e=>{
    var target=e.target;
    var nodes=document.querySelectorAll('.drag-and-drop');
    var node=nodes[nodes.length-1];
    if(nodes.length>1){
      target.parentNode.removeChild(node);
    }
  });
});
</script>
<div class="drag-and-drop"  style="top:1;left:0px;background-color:#ffa500;">要素A</div>
<input type="button"  value="追加" id="add">
<input type="button"  value="削除" id="del">

これに対して

• どういうUIで複数処理をしたいか
• formにはどう反映して、form内でどう処理したいか

などをつめてください

Answer 3

要素 は ノード を継承しています（ノードの派生オブジェクト）ので、親オブジェクトであるノードのプロパティやメソッドが使えます。

ノードの実装も確認すると、以下のメソッドがあります。

• Node.appendChild()
• Node.removeChild()
• Node.replaceChild()

また、次のような実装もあります。

• ParentNode.append()
• ParentNode.prepend()
• ChildNode.remove()

---

MDNを読むとき、目的オブジェクトのページには親（派生元）が何というオブジェクトかの説明はするものの、親オブジェクトの実装は、親オブジェクトのページを確認する必要があります。

要素がノードの実装を使える理由は「オブジェクト 継承」を検索してください。