Q&A
変数tsuika/sakujoが定義されていません。修正してください。
現在、htmlとjavascriptで、コメントフォームを作っています。
作成にあたって問題が発生したので、その原因と対策法をうかがいたく、質問させていただきます。
まず、下の画像をご覧ください。
画像は、作成しているコメントフォームページの初期状態のものです。
このコメントフォームの機能面に関して以下の⑴⑵の機能をつけようと考えています。
（１）追加ボタンを押すと、新しいコメントフォーム（新しいテキストエリアとそのテキストエリアに対応する新しい削除ボタン）が同じページ内に挿入される。（下の画像は、追加ボタンを押した後の様子です。)
（２）削除ボタンを押すと、その削除ボタンが属するコメントフォームが抹消される
冒頭で申し上げた問題とは、この二つの機能のうちの削除機能に関するものです。
具体的に申し上げます。
初期状態で存在していたコメントフォームは、削除ボタンを押すとちゃんと抹消されるのですが、追加ボタンによって新たに挿入されたコメントフォームは削除ボタンを押しても削除されません。
以下にソースコードを記載します。原因や対策法のわかる方がいらっしゃいましたら、ご教授ねがいます。
ーーーーーーーーーーーー
<body> <!-- コメントフォームを新たに挿入するためのボタン --> <input type="button" value="追加" id="tsuika"> <!-- 初期状態で存在するコメントフォーム --> <div> <textarea></textarea><input type="button" value="削除" id="sakujo"> </div> <!-- コメントフォームを追加する機能と、削除する機能をjavascriptでプログラムする --> <script> (function(){ //追加ボタンを押すと、新しいコメントフォームが挿入される tsuika.addEventListener('click', function(){ var div_element = document.createElement("div"); div_element.innerHTML = '<textarea></textarea><input type="button" value="削除" id="sakujo">'; document.body.appendChild(div_element); }); //削除ボタンを押すと、その削除ボタンの親要素が中身もろとも削除される sakujo.addEventListener('click', function(){ this.parentNode.remove(); }); })(); </script>
ーーーーーーーーーーーーーー
回答3件
0
ベストアンサー
以下のように行うこともできると思いますが、いかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<input type="button" value="追加" id="tsuika"> 9<div> 10 <textarea></textarea> 11 <input type="button" value="削除" id="sakujo"> 12</div> 13<script> 14 (function () { 15 var i = 0; 16 17 document.getElementById("tsuika").addEventListener('click', function () { 18 var div_element = document.createElement("div"); 19 div_element.innerHTML = '<textarea></textarea><input type="button" value="削除" id="sakujo' + i + '">'; 20 document.body.appendChild(div_element); 21 i++; 22 }); 23 24 document.querySelector("body").addEventListener('click', function (e) { 25 if (e.target.id.startsWith("sakujo")) { 26 e.target.parentNode.remove(); 27 } 28 }); 29 })(); 30</script> 31</body> 32</html>
投稿2017/08/22 14:59
総合スコア14731
0
他の方が回答されているので蛇足になりますが書いてみたので載せておきます。
html
1<div id="container"> 2 <p> 3 <button id="add"> 4 ADD 5 </button> 6 </p> 7</div>
javascript
1const container = document.getElementById("container"); 2const addButton = document.getElementById("add"); 3 4addButton.addEventListener("click", () => { 5 container.appendChild(createForm()); 6}); 7 8container.addEventListener("click", ev => { 9 if(ev.target.className.match("js-removeForm")) { 10 ev.target.parentNode.remove(); 11 } 12}); 13 14function createForm() { 15 const form = document.createElement("div"); 16 const textarea = document.createElement("textarea"); 17 const removeButton = document.createElement("button"); 18 19 removeButton.className = "js-removeForm"; 20 removeButton.textContent = "remove"; 21 22 form.appendChild(textarea); 23 form.appendChild(removeButton); 24 25 return form; 26}
追記
idの重複があるようです。以下を参考にお読みください。
投稿2017/08/22 15:16
編集2017/08/22 15:21
退会済みユーザー
総合スコア0
0
追加されたものにイベント登録されてないせいだと思いますので、
HTML
1<!doctype html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5</head> 6<body> 7 8<!-- コメントフォームを新たに挿入するためのボタン --> 9<input type="button" value="追加" id="tsuika"> 10 11 12<!-- 初期状態で存在するコメントフォーム --> 13<div> 14<textarea></textarea><input type="button" value="削除" id="sakujo"> 15</div> 16 17 18<!-- コメントフォームを追加する機能と、削除する機能をjavascriptでプログラムする --> 19<script> 20(function(){ 21 //追加ボタンを押すと、新しいコメントフォームが挿入される 22 tsuika.addEventListener('click', function() { 23 var div_element = document.createElement("div"); 24 div_element.innerHTML = '<textarea></textarea><input type="button" value="削除">'; 25 document.body.appendChild(div_element).addEventListener('click', function(){ 26 this.remove(); 27 }); 28 }); 29 30 //削除ボタンを押すと、その削除ボタンの親要素が中身もろとも削除される 31 sakujo.addEventListener('click', function(){ 32 this.parentNode.remove(); 33 }); 34})(); 35</script> 36</html> 37
とりあえずこんな感じかしら。
投稿2017/08/22 14:50
総合スコア5545
あなたの回答
tips
プレビュー
