前提・実現したいこと
重複するHTML要素を削除するjQueryのコードをJavaScriptに書き換えたいです。
現在、下記のコードで重複するHTML要素を削除するという目的は達成できているのですが、練習のため下記のjQueryのコードをJavaScriptにて書き換えたいと考えています。
しかし、 下記の部分をJavaScriptに書き換えることができず、詰まっています。
$(`.txt_list li:contains('${t}')`).get(0)
この部分をJavaScriptで書き換えるとしたらどうしたらいいでしょうか?
該当のソースコード
HTML
1<ul class="txt_list t_100 b_80"> 2 <li>こんにちは</li> 3 <li>おはようございます</li> 4 <li>おはようございます</li> 5 <li>おはようございます</li> 6 <li>こんばんは</li> 7</ul>
jQuery
1$(function () { 2 $(".txt_list li") 3 .filter(function () { 4 const t = $(this).text(); 5 return this !== $(`.txt_list li:contains('${t}')`).get(0); 6 }) 7 .remove(); 8});
試したこと
自分で以下のように要件を分割し、考えてみましたが4の部分で詰まっています
// これをJavascriptで書くとしたら、
// 1. liを配列として取得する。
// 2. filterメソッドを使用する
// 3. ループ対象のテキストコンテントを取得
// 4. ループ対象の要素と、ループ対象の要素のテキストが含まれる要素の最初の要素を比べ、違ったら返す
// 5. filterされた要素を削除する。
const textList = []; document.querySelectorAll(".txt_list li").forEach((val) => { textList.push(val); }); const t = textList[1].textContent; textList.find((e) => e.); console.log(textList);
補足情報(FW/ツールのバージョンなど)
重複するHTML要素を削除するjQueryのコードは下記を参考にしています
https://teratail.com/questions/213419
あなたの回答
tips
プレビュー