特定の条件のときに要素を削除したい

Question

下記jsのように、PC時には.playVideoを埋め込み、スマホ時には削除するというやり方をしたいです。

この記述ですと検証ツールでスマホ時・PC時の表示を繰り返すたびに.playVideoがどんどん増えるだけで、スマホ時に削除されませんでした。
どなたか方法がわかる方、ご教授いただけますと幸いです。
よろしくお願いいたします。

const mqs = window.matchMedia('(min-width: 991px)');
mqs.addListener(changeMediaQuery);
function changeMediaQuery(mqs){
    if (mqs.matches === true) {
        let element = document.getElementById('video');
        element.insertAdjacentHTML('afterbegin', '<source src="img/mv.mp4" class="playVideo">');
    } else {
        document.getElementsByClassName('playVideo').remove();
    }
}

<video id="video" autoplay muted loop>
   <source src="img/mv.mp4" class="playVideo">
</video>

追記（2020/06/16）

ご回答いただきありがとうございます！
現在他の修正で後押ししてしまっている為、終わり次第いただいたコードで試させていただきBAを決定させていただきます。遅くなってしまい申し訳ございません。

Answer 1

// 少なくともこう。複数要素があるならforEachとかを使用する。
document.getElementsByClassName('playVideo')[0].remove();

【Document.getElementsByClassName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

Comments

[miyabi_pudding]

質問のコード、
HTMLCollectionに対してremoveメソッド使ってたんですね・・・。
見落としてました　汗

[退会済みユーザー]

ご回答いただきありがとうございます！
ClassNameですとそのように書いてあげなくては動かないのですね。勉強不足でした。

Answer 2

JavaScriptでの処理なら、
ユーザーエージェントで条件分岐を行うのが、一番有効な処理分けの方法と思われます。
なぜなら、スマホデバイスの解像度はかなり高くなっており、PCとの振り分けが不十分になりがちだからです。

下記が例になります。

const spDevices = [
  'iphone',
  'ipod',
  'android'
];
const ua = navigator.userAgent.toLowerCase();
const spFlg = spDevices.some(v => 
  ua.includes(v) && (v == 'android' ? ua.includes('mobile') : true)
);
// スマホデバイスならば、spFlgはtrueになる

// IEでやるなら下記
const spFlg = spDevices.some(function(v) { 
  return ua.indexOf(v) != -1 && (v == 'android' ? ua.indexOf('mobile') != -1 : true)
});

また、今のコードでは、要素の削除はできません。
（jQueryのような書き方が通じない部分）
ので、下記のようにします。

document.getElementsByClassName('playVideo').forEach(el => el.remove());

// IEでやるなら下記
[].forEach.call(document.getElementsByClassName('playVideo'), function(el) {
  el.parentNode.removeChild(el);
});

IEに直すとけっこう使えない関数多いので、注意が必要です。

Comments

[退会済みユーザー]

こちらのユーザーエージェントでの出し分けができる書き方で書いたら上手く行きました！
スマホ時（実機時）に動画を読み込ませたくなかったのです...
ありがとうございます！

[退会済みユーザー]

すみません、userAgentの構文がIEですとエラーとなってしまい、IEでplayVideoが再生されなくなってしまいました。
調べてみたところおそらくIEに対応していない構文なのではないかと思いました。
IEに対応した書き方をご存知の場合、ご教示いただけますと幸いです。

[miyabi_pudding]

あ、なるほど。
せっかくなので、自身で調べてみてはいかがでしょうか？
IE対応の分

IEに関しては、質問文に記載無いので、要件外になりますので・・・。
（これ以上の対応は作業依頼になる）

ヒントはアロー関数使ってるところです。

[miyabi_pudding]

調べてもどうしてもわからない時はコメントください。

[退会済みユーザー]

ヒントを出してくださりありがとうございます。
const spFlg = spDevices.some(function(v){
ua.includes(v) && (v == 'android' ? ua.includes('mobile') : true)
});
という書き方をしたのですが、動きませんでした...
よろしければ改めて質問を投稿いたしますので、そちらでご教授いただけないでしょうか。

[miyabi_pudding]

いえ、この質問トピックでいっちゃいましょう。
わかりました、IEのバージョンはなんでしょうか？
10以下だと、someさえも使えない可能性ありますので。

[kei344]

【Array.prototype.includes() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes#Browser_compatibility

[miyabi_pudding]

kei344さん >
ありがとうございます。
あとは、要素.remove()や、HTMLCollection.forEachも、IEではできないっぽいですね。
いや、IE11なら、HTMLCollection.forEachできるかも・・・。

[退会済みユーザー]

miyabi_takatsukさん>
ご回答の編集していただきありがとうございます！おかげさまでIEでも問題なく動くようになりました...
こんなにご親切にしていただき恐れ多いです。本当にありがとうございます。
もっとjsの勉強に励みます。

kei344さん>
リンクのご共有いただきありがとうございます！勉強になりました。
include()もIEでは非対応だったのですね...。

[miyabi_pudding]

いえいえ。
IE対応って、様々な面で面倒が発生し、
仕事としては、対応で別途料金をいただくくらい、大変なものだったりします。
今の時代では、多くの案件では対応自体切っていたりします。
なので、次質問される時は、
IEの対応も行なっていきたい旨も記載することをお勧めしますよ。

[退会済みユーザー]

今までフロントエンド経験があまり無くhtml/cssまでの作業だったので、
jsでのIE対応もこれほど大変なものだとは思いませんでした...
今回の件でとても勉強になりました。
今後はIE対応のお願いも含め質問させていただきます。
本当にありがとうございました...！m(_ _)m