alcの単語帳追加ボタンを消すGreasemonkey scriptを書いた

【英語】最も効率よく英単語を復習するテクニック:Evernoteと英辞郎on the webで単語リストを作る - Habitmakerを読んで、Evernotealcの単語を入れる習慣を続けているところ、取り込んだページのレイアウトが崩れる問題に遭遇した。 画像のように画像が邪魔して本文が読めなくなっているのでとても困る。

f:id:kg86:20160420230925p:plain

Greasemonkeyを使って、alcのページを開く時には毎回この画像を削除することにした。 ちなみにこの画像は、有料会員専用の「単語帳に追加するボタン」になっていて、消したところで機能的に何の問題もない。

HTMLの調査

消したい要素を特定するためにソースコードを読んで該当するDOM要素の取得方法を考える。

ソースコードを見ると、ボタンは全て"tango"classに属することがわかった。

<span class="tango">
...
</span>

Greasemonkey script

ボタンは全て"tango"classに属することがわかったので、"tango"classのエレメントを全て取得して、visibilityを"hidden"に設定すれば良い。

初めは、親エレメントを取得してremoveChildでDOMを削除するようにしていたけど、上手く動作しなかった。 原因が分かる人は教えてください。

window.onload = function() {
  console.log('removeTangoBtn is running');

  var removeElement = function (elm) {
    elm.style.visibility = "hidden";
    // var parent = elm.parentElement
    // parent.removeChild(elm);
  };
  var tangoBtn = document.getElementsByClassName('tango');
  console.log(tangoBtn.length + '個の単語ボタンを検出');
  [].forEach.call(tangoBtn, removeElement);
  console.log('Done');
}