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

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

ただいまの
回答率

90.49%

  • JavaScript

    16960questions

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

  • jQuery

    6915questions

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

div要素の削除について

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,726

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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/04/21 15:55

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

    キャンセル

  • it_solution_lab

    2016/04/21 16:53

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

    キャンセル

回答 3

+3

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


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

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


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

div_element.id= "div" + indexno;


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

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

function del(indexno)
{
     var div_element = document.getElementById("div"+indexno);
    document.body.removeChild(div_element);
}


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

div_element.parentNode.removeChild(div_element);


とするのが正解ですね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/21 16:50

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

    キャンセル

  • 2016/04/21 17:01

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

    キャンセル

  • 2016/04/21 17:25

    アップしたソースでは、要素を消す、ということが実現できていないのです
    indexnoはサンプルでは、1~5ですが、データベースの中身によって、さまざまな値をとります。
    そこで、idを指定して削除する、ということになりますが、

    No3のdivの表示を画面上から消すことが出来ていません

    キャンセル

  • 2016/04/21 17:33

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

    キャンセル

  • 2016/04/21 18:24

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

    キャンセル

checkベストアンサー

+2

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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<script>
// 引数で指定したindexnoに応じたIDを持つ要素を#ulistに追加
function add(indexno)
{
    // #ulistというIDを持つ要素を取得
    var parent_object = document.getElementById("ulist");

    // parent_objectが存在しない時は処理を中断
    if (!parent_object) {
      return;
    }

    // <div1>などの定義されていない要素ではなく<div>を生成する
    var div_element = document.createElement("div");
    // 生成したdiv要素にIDを追加
    div_element.id = "div"+indexno;
    // 生成したdiv要素の内容を指定したHTMLに書き換える
    div_element.innerHTML = '<table border="1"><tr><td>●</td><td>No'+indexno+'</td></tr></table>';
    // 生成したdiv要素を#ulistの子要素としてDOMに追加する
    parent_object.appendChild(div_element);
}

// 引数で指定したindexnoに応じたIDを持つ要素を削除
function del(indexno)
{
    // 追加した要素から指定したIDを持つ要素を取得
    var div_element = document.getElementById("div"+indexno);

    // 要素を取得できたときだけ削除を実行する
    if (div_element) {
      // 取得した要素を削除
      // div_elementがちゃんとremoveChildの対象である子要素となるようにする
      // 「div_elementの親要素」(div_element.parentNode)「の子要素であるdiv_elementを削除」(.removeChild(div_element))とすることでdiv_elementを削除できる
      div_element.parentNode.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>


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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/22 17:31

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



    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/21 16:48

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16960questions

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

  • jQuery

    6915questions

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