今の世の中、提供されているサービスを利用している人が多い思いますが、その中でフッターとかサイドバーの下の方とかで、余計な表示をしている要素を消したい事があると思います。
こう言った時、単純に要素削除を記載すると表示順によって、消せないまたは消した後復活のような挙動をするものがあります。このような実装がなされている時は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
