abemaビデオで、無料のみを表示するブックマークレットを、ものすごく雑に作る。

やりたいこと

• abemaビデオ(アニメ)の下部にある一覧で『無料』のみを表示したい。
• 『無料のみ』のチェックボックスはあるけど、『一部無料』も表示されないようにしたい。
• 頑張らない。

出来たもの

javascript:document.querySelectorAll("#main > div > main > div > section > div > div > div").forEach(function(e){var muryo=e.querySelector("#main > div > main > div > section > div > div > div > a.com-m-TitleCard__link > div > div > span");if(muryo == null){e.parentNode.removeChild(e)}else if(muryo.innerText=='一部無料'){e.parentNode.removeChild(e)}});

一応、登録用リンクも置いとこうと思ったけど、Qiitaの仕様上出来ないっぽい。
もし登録や動作確認したい人が居たら、↑をコピーして、ブックマークのURLに貼り付けてください。

追記

使っていくうちに『無料』且つ『●新着エピソード』も消したくなったので、改修。

javascript:document.querySelectorAll("#main > div > main > div > section > div > div > div").forEach(function(e){var muryo=e.querySelector("#main > div > main > div > section > div > div > div > a.com-m-TitleCard__link > div > div > span");if(muryo == null){e.parentNode.removeChild(e)}else if(muryo.innerText=='一部無料'){e.parentNode.removeChild(e)};console.log(e.querySelector('#main > div > main > div > section > div > div > div > a > span > span'));if(e.querySelector('#main > div > main > div > section > div > div > div > a > span > span')!=null){e.parentNode.removeChild(e);}});

やったこと

記憶ベース。使用環境/ブラウザはwindows10 home/chrome。デバッグや調査は省略。

1. https://abema.tv/video/genre/animation を開く。
2. 消したい要素を右クリックして検証。
3. 要素を選択した状態でデベロッパーツールが開かれる。
4. 目的の要素でなければ、目的の要素を探す。目的の要素であれば、右クリック→Copy→Copy JS Pathをクリック。

5. 以下の要素が取得できた。
   document.querySelector("#main > div > main > div > section.abm_c6b3d82d_b > div > div:nth-child(5) > div:nth-child(2)")

6. querySelectorをquerySelectorAllに変更して、要素を特定しそうな要素を消す。
   document.querySelectorAll("#main > div > main > div > section > div > div > div")

7. デベロッパーツールのconsoleタブで、動作確認。取得成功。

8. forEachとquerySelectorで、目的の要素まで取得。中身確認。取得成功。
   なお、中身はnull <span>一部無料</span> <span>無料</span> だった。
   document.querySelectorAll("#main > div > main > div > section > div > div > div").forEach(function(e){console.log(e.querySelector("#main > div > main > div > section > div > div > div > a.com-m-TitleCard__link > div > div > span"))})

9. 中身が null の時にinnerTextが出来ないようなので、とりあえずifで分割して、要素を削除。
   document.querySelectorAll("#main > div > main > div > section > div > div > div").forEach(function(e){muryo=e.querySelector("#main > div > main > div > section > div > div > div > a.com-m-TitleCard__link > div > div > span");if(muryo == null){e.parentNode.removeChild(e)}else(console.log(e))})

10. 残った消したい要素の 一部無料 だった時も、同様に削除する。
    document.querySelectorAll("#main > div > main > div > section > div > div > div").forEach(function(e){var muryo=e.querySelector("#main > div > main > div > section > div > div > div > a.com-m-TitleCard__link > div > div > span");if(muryo == null){e.parentNode.removeChild(e)}else if(muryo.innerText=='一部無料'){e.parentNode.removeChild(e)}});)

11. javascript:; でブックマーク化して登録。完成。

備考

• 消した後に『無料のみ』をチェックすると画面が真っ白になる。