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

Question

前提・実現したいこと

    <div id="test">
      <ul>
        <li id="li-test">
          <input type="checkbox" name="edit">
          <a href="#">ゴンザレス</a>
          <button>button</button>
        </li>
      </ul>
    </div>

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

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

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

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

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

該当のソースコード

    var test = document.getElementById('test');
    var inputTag = document.getElementsByTagName('input');
    var buttonTag= document.getElementsByTagName('button');

 　　test.removeChild(inputTag);
　　 test.removeChild(buttonTag);

試したこと

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

２．
クラス名を振って同様に試しましたが、こちらはエラー
３．

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

こちらもエラー

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

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

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

Answer 1

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

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を使用するともう少しまとめられそうです。
もう少し簡潔な書き方あるかもしれませんが、こんな感じになります。

var test = document.getElementById('test');
var removeChilds = test.querySelectorAll('input, button');

for (var i=0; i<removeChilds.length; i++) {
  removeChilds[i].parentNode.removeChild(removeChilds[i])
}

【参考】

• MDN - querySelectorAll
• Qiita - 要素の取得方法まとめ

Comments

[yasu20000]

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

Answer 2

単に消したいだけなら

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

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

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

Comments

[yasu20000]

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