html内で動的にデータベースの内容にあわせて
DIV要素を追加し、
不要になったらボタンで要素そのものを削除する
ということをやりたいのですがうまく動作しません。
サンプルHTMLは、
DBの代わりに、追加ボタンをNo1~No5まで作りました
任意の順番で適当にボタンを押せば、要素は追加されていきますが、
その後、任意の番号のDIV要素を削除したいと考えています
このサンプルではどんな順番で追加していっても No3を削除して、削除したら
削除した要素の下の要素が上に詰まっていく ということを実現したいのですが、
うまく要素が消えません。
指定の仕方が悪いのだと思いますが、よくわからないので
教えてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> function add(indexno) { var parent_object = document.getElementById("ulist"); var div_element = document.createElement("div"+indexno); div_element.innerHTML = '<table border="1"><tr><td>●</td><td>No'+indexno+'</td></tr></table>'; parent_object.appendChild(div_element); } </script> <script> function del(indexno) { var div_element = document.getElementById("div"+indexno); document.body.removeChild(div_element); } </script> </head> <body> <div> <button onclick="add(1);">No1を追加!</button> <button onclick="add(2);">No2を追加!</button> <button onclick="add(3);">No3を追加!</button> <button onclick="add(4);">No4を追加!</button> <button onclick="add(5);">No5を追加!</button> <button onclick="del(3);">[No3]を削除</button> </div> <div id="ulist"> </div> </body> </html>
回答3件
あなたの回答
tips
プレビュー