繰り返し処理を使って要素を消す [JavaScript]

今の世の中、提供されているサービスを利用している人が多い思いますが、その中でフッターとかサイドバーの下の方とかで、余計な表示をしている要素を消したい事があると思います。

こう言った時、単純に要素削除を記載すると表示順によって、消せないまたは消した後復活のような挙動をするものがあります。このような実装がなされている時はsetInterval() メソッドを利用します。

setInterval() メソッドは、一定の間隔で関数やコードスニペットを繰り返し呼び出すため、setIntervalを利用して毎秒処理を実行させ、実行された処理内で要素の判定を行い要素を消し、要素がなければsetIntervalの実行をclearIntervalで止めるといった方法です。

以前setIntervalで文言表示を強制するような処理を見かけましたが、このような場合でもsetIntervalを使った削除をし続ける事で、一瞬文言が表示されるものの、表示を打ち消し削除こともできます。

id指定の場合

<script type='text/javascript'>
// <![CDATA[
var timer;
window.onload = function () {
    timer = setInterval(dell, 30);
};
var dell = function () {
    //削除要素の親id
    var target_id_ele = document.getElementById("target_id_name");
    if (target_id_ele.hasChildNodes()) {
        target_id_ele.removeChild(target_id_ele.firstChild);
    } else {
        clearInterval(timer);
    }
};
// ]]>
</script>

class指定の場合

<script type='text/javascript'>
// <![CDATA[
var timer_contd;
window.onload = function () {
    timer_contd = setInterval(dell_contd, 30);
};
var dell_contd = function () {
    //class名を指定する場合
    var elems = document.getElementsByClassName("target_class_name");
    if (elems.length) {
        for (var i in elems) {
            var e = elems[0];
            if (typeof e !== "undefined") {
              e.parentNode.removeChild(e);
            }
        }
    } else {
        clearInterval(timer_contd);
    }
};
// ]]>
</script>

要素削除をするにあたって、要素の選択と存在判定にそれぞれコツがいるので注意が必要です。undefinedに気をつけて下さい。

邪魔な要素をタイマー処理で消す方法は、繰り返し実行し続けるため、エラーになるとコンソールにエラーが大量に出続けるため、個人的には気軽に使うことはオススメしません。

参考：MDN https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval