質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

8009閲覧

div要素の削除について

it_solution_lab

総合スコア71

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/04/21 06:49

編集2016/04/21 07:52

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/04/21 06:55

コードはコードブロックで囲んでください。```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。 また、「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」をお書きください。
it_solution_lab

2016/04/21 07:53

うまく動作しない、のは、 要素は追加できるが、削除できない、と書いております。 追加のボタンを押すと要素が追加されますが、 No3の要素を削除する(つもり)のボタンを押しても消せない、ということです
guest

回答3

0

javascript

1var div_element = document.createElement("div"+indexno);

そもそもここからおかしいです。
これだとタグ名が「div1」とか「div2」とかになってしまいます。
1.divタグのエレメントを作成する。
2.そのタグにid属性をセットする。
というようにしたいと思われるので、

javascript

1var div_element = document.createElement("div"); 2div_element.id=indexno;

のような感じにすればいいのでは?
ただし、id属性は数字から始まるid値を使用できないので、

javascript

1div_element.id= "div" + indexno;

などとしてやる必要がありますね。

追記:
削除の実行部分もおかしかったので、追記しておきます。

javascript

1function del(indexno) 2{ 3 var div_element = document.getElementById("div"+indexno); 4 document.body.removeChild(div_element); 5}

「div_element」の親要素はbodyタグではないので、「removeChild」できません。

javascript

1 div_element.parentNode.removeChild(div_element);

とするのが正解ですね。

投稿2016/04/21 06:55

編集2016/04/21 09:24
tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

it_solution_lab

2016/04/21 07:50

ひとつひとつの要素で個々に追加、削除をしたかったので、div+indexnoにしましたが id というつけ方が出来るのですね その場合の、削除の仕方の記述をお知らせいただけますか?
tkturbo

2016/04/21 08:01

「その場合の、削除の仕方の記述を」←質問ソース内、「function del()」で削除する処理をご自身で書いてますよ > it_solution_labさん
it_solution_lab

2016/04/21 08:25

アップしたソースでは、要素を消す、ということが実現できていないのです indexnoはサンプルでは、1~5ですが、データベースの中身によって、さまざまな値をとります。 そこで、idを指定して削除する、ということになりますが、 No3のdivの表示を画面上から消すことが出来ていません
tkturbo

2016/04/21 08:33

「No3のdiv」←このdivエレメントにつけられたidの値は何になってますか? また、このエレメントを消そうとして「function del(indexno)」をどのように呼び出していますか?
tkturbo

2016/04/21 09:24

「function del(indexno)」内で誤りを見つけたので回答に追記しました。
guest

0

ベストアンサー

まだ解決されていないようなので、tkturboさんの回答の補足としてコードの全体像を記載します。

ちなみに現状ではadd()に渡されたindexnoがそのままinnerHTMLに含まれているので出力をエスケープ処理などで無害化した方が良いとか、もっと言えばinnerHTMLで追加している要素をできればcreateElementappendChildcreateTextNodeなどを利用して生成・組み立てを行ってその要素をappendChildで追加した方が良いとか、同じボタンを押すたびに一意の識別子であるIDを持つ要素が重複して生成されてしまうなどの問題がありますが、動作だけで言えばこれで目的を達成できるはずです。

なお、最初にもその旨を書いていますが、これは一部を除いてほぼすべてtkturboさんの回答にある内容です。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> 5<script> 6// 引数で指定したindexnoに応じたIDを持つ要素を#ulistに追加 7function add(indexno) 8{ 9 // #ulistというIDを持つ要素を取得 10 var parent_object = document.getElementById("ulist"); 11 12 // parent_objectが存在しない時は処理を中断 13 if (!parent_object) { 14 return; 15 } 16 17 // <div1>などの定義されていない要素ではなく<div>を生成する 18 var div_element = document.createElement("div"); 19 // 生成したdiv要素にIDを追加 20 div_element.id = "div"+indexno; 21 // 生成したdiv要素の内容を指定したHTMLに書き換える 22 div_element.innerHTML = '<table border="1"><tr><td>●</td><td>No'+indexno+'</td></tr></table>'; 23 // 生成したdiv要素を#ulistの子要素としてDOMに追加する 24 parent_object.appendChild(div_element); 25} 26 27// 引数で指定したindexnoに応じたIDを持つ要素を削除 28function del(indexno) 29{ 30 // 追加した要素から指定したIDを持つ要素を取得 31 var div_element = document.getElementById("div"+indexno); 32 33 // 要素を取得できたときだけ削除を実行する 34 if (div_element) { 35 // 取得した要素を削除 36 // div_elementがちゃんとremoveChildの対象である子要素となるようにする 37 // 「div_elementの親要素」(div_element.parentNode)「の子要素であるdiv_elementを削除」(.removeChild(div_element))とすることでdiv_elementを削除できる 38 div_element.parentNode.removeChild(div_element); 39 } 40} 41</script> 42</head> 43 44<body> 45 46<div> 47<button onclick="add(1);">No1を追加!</button> 48<button onclick="add(2);">No2を追加!</button> 49<button onclick="add(3);">No3を追加!</button> 50<button onclick="add(4);">No4を追加!</button> 51<button onclick="add(5);">No5を追加!</button> 52<button onclick="del(3);">[No3]を削除</button> 53</div> 54 55<div id="ulist"></div> 56 57</body> 58</html>

また、これは質問への回答ではないので読み飛ばして下さっても構わないのですが、ささやかな助言として一読して下されば幸いです。

まず、プログラムコードを書くときに、その処理内容についてのコメントを一緒に書いておくことで、その処理自体への理解もそうですが、全体の処理の流れも把握しやすくなると思います。

そして、コメントを適切に書けない場合は該当箇所の処理をよく理解できていないということなので、そのときは該当箇所の処理をconsole.log()でコンソールに出力して調査したり、検索エンジンや書籍などで調べて処理内容を把握するようにしてみると理解しやすくなると思います。

私自身まだプログラミング歴が1年足らずと浅いのでどこまでお役に立てるかは分かりませんが、この助言が理解を進める参考になれば嬉しく思います。

投稿2016/04/21 13:40

編集2016/04/22 12:18
flat

総合スコア617

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

it_solution_lab

2016/04/22 08:31

無事実現できました。 具体的な例を提示してくださりありがとうございます。 実際のプログラムでは、要素名は直接的な記述でなく、 IDも動的に変化しますので、同一要素が発生することはまずない仕様です 、
guest

0

新しくdiv要素を追加するのではなく、最初はdisplay:noneにしたdiv要素をボタンのON/OFFで
display:blockとdisplay:noneを切り替える方式はいかがでしょうか。

投稿2016/04/21 06:58

katsuo_isono

総合スコア63

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

it_solution_lab

2016/04/21 07:48

プログラム上では最初にdiv要素の数が不定で、データベースのデータの内容によって 表示したい要素の数そのものが動的に変わるため display:none では実現できません
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問