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

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

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

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

Q&A

解決済

2回答

21134閲覧

ノードが理解できずremoveChild()が上手く使えません。

yasu20000

総合スコア10

JavaScript

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

0グッド

0クリップ

投稿2018/06/22 19:27

前提・実現したいこと

html

1 <div id="test"> 2 <ul> 3 <li id="li-test"> 4 <input type="checkbox" name="edit"> 5 <a href="#">ゴンザレス</a> 6 <button>button</button> 7 </li> 8 </ul> 9 </div>

この中のinputタグとbuttonタグをjsで削除したいです。
idやclassを振るのは不可です。
jqueryやライブラリを使うのも不可です。

ここに質問の内容を詳しく書いてください。

初歩的な質問で失礼します。
ノードという物が理解できていないためか、どうしてもエラーが出てしまいます。
ノードじゃないとダメというエラーが出ているようですが、ノード指定するにはどうすればよいかわかりません。

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

TypeError: Failed to execute 'removeChild' on 'Node'

該当のソースコード

js

1 var test = document.getElementById('test'); 2 var inputTag = document.getElementsByTagName('input'); 3 var buttonTag= document.getElementsByTagName('button'); 4 5   test.removeChild(inputTag); 6   test.removeChild(buttonTag); 7

試したこと

1.
inputタグとbuttonタグにIDをふるとできましたが、後に複数作成する可能性があるためIDは使えません。

2.
クラス名を振って同様に試しましたが、こちらはエラー
3.

js

1var parent = inputTag.parentNode; 2 parent.removeChild(inputTag);

こちらもエラー

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

ノードについて検索しても、良い解説を得られませんでした。
またremoveChildについても良い解説が得られませんでした。

そのほかにも色々試してみましたが、エラーが回避できませんでした。
何卒ご教授いただけたら助かります。
よろしくお願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

うまくいかない理由ですが、

document.getElementsByTagName

は複数の要素を返します。document.getElement**(s)**ByTagName
idはDOMツリーの中で1つなのでdocument.getElement()ByIdは1つしか返しません

removeChildの引数は一つの要素を指定しなければならないので配列の要素を入れてしまうと失敗してしまいます。この場合はループを使用して一つずつ削除します。

直接関係ないかもしれませんが

var inputTag = document.getElementsByTagName('input');

ここでdocument(DOMツリー全体)に対してinputタグ探していますので <div id="test">の下のinputタグ に限定できないですね、限定したいのであれば

var inputTag = test.getElementsByTagName('input');

ですね。

また、 querySelectorAllを使用するともう少しまとめられそうです。
もう少し簡潔な書き方あるかもしれませんが、こんな感じになります。

js

1var test = document.getElementById('test'); 2var removeChilds = test.querySelectorAll('input, button'); 3 4for (var i=0; i<removeChilds.length; i++) { 5 removeChilds[i].parentNode.removeChild(removeChilds[i]) 6}

【参考】

投稿2018/06/22 21:00

euledge

総合スコア2404

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

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

yasu20000

2018/06/23 06:19

ご回答いただきありがとうございます! 解説も加えていただきまして、大変参考になりました。 どのサイトや解説本もこの2~3歩先の説明しかなく、理解にできまずにいました。 ありがとうございました。
guest

0

単に消したいだけなら

document.getElementsByTagName('button')[0].remove() document.getElementsByTagName('input')[0].remove()

parent.removeChildren(target)は文字通り小要素を消すときに使います

classやtag nameで探索するときは複数候補返ってくる可能性あるのでloopを回したり、要素指定してやりたい処理(ここではremoce())を記述します

投稿2018/06/22 19:53

編集2018/06/22 19:57
anonymous001

総合スコア96

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

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

yasu20000

2018/06/23 06:10

素早いご回答いただきありがとうございます! ネイティブjavascriptで.remove()を対応する感じらしいので試しましたが、この記述でchrome、firefox上では動きましたが、IEは非対応でした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問