前提・実現したいこと
+ボタンで要素を追加し、cardクラスを出力
カード内にある削除という名のbuttonタグが押されます。その際に追加していたカードが削除されるようにしたいです。
該当のソースコード
HTML
1 2 <div class="tile is-ancestor back"> 3 <div class="tile is-parent board"> 4 <div class="tile is-child"> 5 <div class="drag-area"> 6 <div class="nameboard side"> 7 <div class="button is-primary is-rounded" onclick="add();">+</div> 8 <div class="name"> No nameさん</div> 9 <div class="no_name"> 10 <span style="display: none;"></span> 11 </div> 12 </div> 13 <div class="back" id="Noname_card"> 14 </div> 15 16 17 </div> 18 </div> 19 </div> 20
JS
1var add = () => { 2 3 let add_ele = document.getElementById("Noname_card"); 4 5 const div_element = document.createElement("div"); 6 7 div_element.innerHTML = `<div class="card"> 8 <div class="no_name"> 9 <span style="display: none;"></span> 10 </div> 11 <div class="name"> 12 <p> タスク</p> 13 </div> 14 <div class="button is-primary" onclick="del();">削除</div> 15</div>`; 16 17 add_ele.appendChild(div_element.childNodes[0]); 18 19} 20 21var del = () => { 22 23 let card_dele = document.getElementById("Noname_card"); 24 25 26 27 28 } 29 30}
試したこと
JS
1 2var add = () => { 3 4 let add_ele = document.getElementById("Noname_card"); 5 6 const div_element = document.createElement("div"); 7 8 div_element.innerHTML = `<div class="card"> 9 <div class="no_name"> 10 <span style="display: none;"></span> 11 </div> 12 <div class="name"> 13 <p> タスク</p> 14 </div> 15 <div class="button is-primary" onclick="del();">削除</div> 16</div>`; 17 18 add_ele.appendChild(div_element.childNodes[0]); 19 add_ele.addEventListener("click", del, false); 20 21} 22 23var del = () => { 24 let card_dele = document.getElementById("Noname_card"); 25 card_dele.removeChild(this.addele.childNodes[0]); 26}
回答2件
あなたの回答
tips
プレビュー