Javascript 文字判別してリストを削除したい

Question

特定の文字が含まれた時だけ、リスト行を消したいと思っています
結果として

カテゴリー1
カテゴリー3
カテゴリー5

と表示させたいです

単純に2番目と4番目の行を消すのではなく、カテゴリー2、カテゴリー4
という文字がある場合のみです

色々調べながら下記のように記述しました

<nav class="breadcrumb">
    <ol class="breadcrumb__list">
    <li class="breadcrumb__listItem"><a href="">カテゴリー1</a></li>
    <li class="breadcrumb__listItem"><a href="">カテゴリー2</a></li>
    <li class="breadcrumb__listItem"><a href="">カテゴリー3</a></li>
    <li class="breadcrumb__listItem"><a href="">カテゴリー4</a></li>
    <li class="breadcrumb__listItem">カテゴリー5</li>
    </ol>
</nav>

<script type="text/javascript">
const pan = document.getElementsByClassName('breadcrumb__listItem');
let string2="カテゴリー2";
let string4="カテゴリー4";

if(pan.includes(string2)){
pan[1].remove();
}

if(pan.includes(string4)){
pan[2].remove();
}
</script>

Uncaught TypeError: pan.includes is not a function

こちらを参考にしました
https://www.wakuwakubank.com/posts/485-javascript-include-array-string/

よろしくお願いします

Comments

[m.ts10806]

includes()
はどこで見つけたものですか？
URLなど質問本文に追記してください。

[dboy]

ありがとうございます
参考URLを追加しました

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const list=["カテゴリー2","カテゴリー4"];
  [...document.querySelectorAll('.breadcrumb__listItem')].forEach(x=>{
    if(list.includes(x.textContent)) x.remove();
  });
});
</script>
<nav class="breadcrumb">
    <ol class="breadcrumb__list">
    <li class="breadcrumb__listItem"><a href="">カテゴリー1</a></li>
    <li class="breadcrumb__listItem"><a href="">カテゴリー2</a></li>
    <li class="breadcrumb__listItem"><a href="">カテゴリー3</a></li>
    <li class="breadcrumb__listItem">カテ<a href="">ゴリ</a>ー4</li> <!--これもヒットさせる-->
    <li class="breadcrumb__listItem">カテゴリー5</li>
    </ol>
</nav>

古い書き方

window.addEventListener('DOMContentLoaded', function(){
  const list=["カテゴリー2","カテゴリー4"];
  [].forEach.call(document.querySelectorAll('.breadcrumb__listItem'),function(x){
    if(list.indexOf(x.textContent)>-1) x.parentNode.removeChild(x);
  });
});

指定文字を含むものを削除

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const list=["カテゴリー2","カテゴリー4"];
  [...document.querySelectorAll('.breadcrumb__listItem')].forEach(x=>{
    if(new RegExp(list.join('|')).test(x.textContent)) x.remove();
  });
});
</script>
<nav class="breadcrumb">
<ol class="breadcrumb__list">
<li class="breadcrumb__listItem">
<a href="">カテゴリー1</a>
</li>
<li class="breadcrumb__listItem">
<a href="">カテゴリー2</a>
</li>
<li class="breadcrumb__listItem">
<a href="">カテゴリー3</a>
</li>
<li class="breadcrumb__listItem">
<a href="">カテゴリー4</a>
</li>
<li class="breadcrumb__listItem">カテゴリー5</li>
</ol>
</nav>

Comments

[dboy]

ご回答ありがとうございます。

通常のブラウザでは動作したのですが、実は現在フューチャーショップというECサイトサービスを使用しており、動作がしませんでした

...のスプレッド構文というものがES2018で、おそらく対応していないものと思われます。

スプレット構文というものを初めて見たので、できれば古い書き方で書いて頂くことは可能でしょうか。

まだ本を読んで序盤の知識のため、長くても略式でない方が勉強になり助かります。

[yambejp]

「フューチャーショップ」というサイトの仕様がよくわかりませんが
いちおうIE11でも動作するような書き方を追記しておきました

[dboy]

古い書き方のご回答もいただき、ありがとうございます。
ブラウザ上で動作確認できましたので、試してみたいと思います。

[dboy]

システム上なぜ上手くいかないか理由が少しわかりました
リストを書き出されてた際に

<li class="breadcrumb__listItem">
<a href="">カテゴリー2</a>
</li>

と改行されておりました

<li class="breadcrumb__listItem">
<a href="">カテゴリー2</a>
</li>

と

<li class="breadcrumb__listItem"><a href="">カテゴリー2</a></li>

では取得や判別方法が違うのでしょうか

[yambejp]

改行している場合は改行マークを含める文字になりますので
\nカテゴリー２\nとの比較になってしまうでしょうね
改行は無視するもしくは「カテゴリー２」文字が含まれるという条件設定になると思います

[dboy]

const list=["\nカテゴリー2\n","\nカテゴリー4\n"];
と記述すればよろしいでしょうか

[dboy]

<a>タグで挟まれているので、カテゴリー２\nでは少し違うのかなと思いました

[yambejp]

breadcrumb__listItemクラスのtextContentはaタグの前後の改行マークを含めたものになるので微妙です。追記した方法でやるのが妥当では？
ただしカテゴリー２１とかにもヒットしてしまうのでそれが嫌ならaタグ内で改行がないならaタグを指定してtextContentを抜き出す手もありますね

[dboy]

ありがとうございます。
無事に成功しました。

const list=["\nカテゴリー2\n","\nカテゴリー4\n"];

としてみました

書き出されたHTMLが左詰で
<li class="breadcrumb__listItem">
<a href="">カテゴリー1</a>
</li>
となっていたのが良かったのかもしれません

試しにaタグの前にTABやスペースなどを入れたところ非表示にはなりませんでした