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

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

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

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

[JavaScript] DOMで追加した特定の要素を、特定して削除したい(ライブラリもフレームワークも使わずに)

myuchan15
myuchan15

総合スコア0

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

4回答

1評価

0クリップ

7閲覧

投稿2019/02/06 04:53

編集2022/01/12 10:58

素のJavaScriptを使用し、DOMで追加したdiv要素を、
ライブラリもフレームワークも使わずに、
削除をするボタンで削除したいのですが、
DOMを作成する際、同じボタンでDOMを追加するので何個も同じDOMが出来上がる仕様となっています。
なので同じdivが何個もできるため、消したいdivを特定するやり方で、
何か良い方法がないかと思案しています。

考えているのが、
DOMで作成する際、idに、ボタンを押すたびに異なる番号が振られるようにして0. 番号リスト
(1回目に押したら id="id1" 2回目に押したら id="id2 のような感じ)
削除ボタンを押した際は、そのボタンでidを特定して、特定したidのものだけを削除するという
方法かなと思っているのですが、どのようにすればできるのか悩んでいます。

############ 下記はhtmlファイルです。 ############

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/styles.css"> <title>お買い物リスト</title> </head> <body> <div id="container"> <div id="border"> <button id="aaa" type="button">AAA</button> <button id="bbb" type="button">BBB</button> </div> <span id="spa"></span> </div> <script src="js/main.js"></script> </body> </html> ############ htmlファイルここまで ############

############ 下記はJavaScriptファイルです。 ############

aaa.onclick = function() {
var div = document.createElement('div');
div.id = 'div';
spa.appendChild(div);
var aas = document.createElement('select');
aas.id = 'aas';
div.appendChild(aas);

var del = document.createElement('button'); // 削除ボタン生成
del.className = 'del';
var saku = document.createTextNode('削除');
del.appendChild(saku);
div.appendChild(del);

del.onclick = function() {
var e = document.getElementById('div');
e.parentNode.removeChild(e);
};

var opta = document.createElement('option');
opta.value = 'item';
var senta = document.createTextNode('--------------AAA--------------');
opta.appendChild(senta);
aas.appendChild(opta);

var optap = document.createElement('option');
optap.value = 'apple';
var apple = document.createTextNode('りんご');
optap.appendChild(apple);
vegi.appendChild(optap);

var optmi = document.createElement('option');
optmi.value = 'mikan';
var mikan = document.createTextNode('みかん');
optmi.appendChild(mikan);
vegi.appendChild(optmi);
};

drink.onclick = function() {
var div = document.createElement('div');
div.id = 'div';
spa.appendChild(div);
var drink = document.createElement('select');
drink.className = 'dr';
div.appendChild(drink);
var del = document.createElement('button'); // 削除ボタン生成
del.className = 'del';
var saku = document.createTextNode('削除');
del.appendChild(saku);
div.appendChild(del);

var optdr = document.createElement('option');
optdr.value = 'item';
var senta = document.createTextNode('--------------BBB--------------');
optdr.appendChild(senta); //
drink.appendChild(optdr);

var optmi = document.createElement('option');
optmi.value = 'milk';
var milk = document.createTextNode('牛乳');
optmi.appendChild(milk);
drink.appendChild(optmi);
};

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

x_x
x_x

2019/02/06 05:09

```JavaScript コード ``` などのように囲めば\(Markdown記法\)、言語に合わせて見やすくなるので修正お願いします
Lhankor_Mhy
Lhankor_Mhy

2019/02/06 05:51

変数 vegi には何が入っていますか?
Lhankor_Mhy
Lhankor_Mhy

2019/02/06 05:53

あと、変数 drink も未定義のまま使われているようです。
myuchan15
myuchan15

2019/02/06 06:48

ご指摘ありがとうございます。今後はコードの部分を見やすくMarkdown記法で記述したいと思います。 他の方にお教えいただいたやり方で解決しましたので、解決済みとしたいと思います。 ありがとうございました。また何かありましたらよろしくお願いいたします。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。