- ベストアンサー
指定した配列からデータを削除する方法
- 指定した配列と一致したデータを削除する方法を知りたいです。
- 配列に該当するデータだけを取り出す方法を教えてください。
- HTMLのリンク要素のhrefから配列に該当するデータだけを取り出し、要素を削除したいです。
- JavaScript
- 回答数3
- ありがとう数8
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
消したい（親）要素に class="del" にする querySelectoAll, classList, Array.map が使えること 配列はちょっと変更す。 <!DOCTYPE html> <meta charset="utf-8"> <body> <ul> <li class="del"> <a href="http://example.com ">A</a> <li class="del"> <a href="http://example.net/subdirectory/post.html ">B</a> <li class="del"> <a href="https://example.org ">C</a> <li class="del"> <a href="http://example.jp/subdirectory/post.html ">D</a> </ul> <a href="https://subdomain.example.org" class="del">E</a> <script> var ary = [ "http://example.com/", "http://example.net/", "https://subdomain.example.org", "http://example.jp/subdirectory" ]; function makeSelectorString (href) { return 'a[href^="' + href + '"]'; } function getParentByClass (e) { if (! e) throw new Error; return e.classList.contains (this) ? e : getParentByClass.call (this, e.parentNode) } function delChild (e) { e.parentNode.removeChild (e); } Array.prototype.map.call ( document.querySelectorAll (ary.map (makeSelectorString).join (',')), getParentByClass, 'del' ).forEach (delChild); </script> </body>
その他の回答 (2)
- Ogre7077
- ベストアンサー率65% (170/258)
// おまじない var _, A = function(list){return Array.prototype.slice.apply(list)}; // 最初に親要素を取得 var items = document.querySelectorAll('li'); A(items).forEach(function(item){ _ ; // 親要素配下のリンク要素を取得 _ ; var links = item.querySelectorAll('a[href]'); _ ; var result = A(links).some(function(link){ _ , _ ; var href = link.href; _ , _ ; // リンク要素の href が削除対象か判断 _ , _ ; return array.some(function(s){ _ , _ , _ ; return href.indexOf(s) >= 0; _ , _ ; }); _ ; }); _ ; // 一つでも削除対象の href があれば、親要素を DOM から削除 _ ; if (result) item.parentNode.removeChild(item); });
お礼
改めて頂いた回答に感謝致します。 提示して頂いたコードでは結果的に要素を非表示に出来なかったのですが、これは私の理解不足なのだと思います。 こちらのコードも参考にしながら、今後勉強を進めていこうと思います。 ありがとうございました。
補足
回答ありがとうございます。 提示して頂いたコードをリファレンスを参考にしながら見ていたのですが、Javascriptに触れたのがごく最近でまだわからない部分が多いです…。 丁寧にコメントまで付けて頂いていながら恐縮なのですが、こちらのコードでリンクを指定するにはどうしたら良いのでしょうか？ また、スクリプトはUserScriptとしてGreasemonkeyなどで利用したいのですが、aタグを囲む親要素を固定されたものではなく、li以外のdivやspanなどでも対応できる様にするにはどうしたら良いですか？
- fujillin
- ベストアンサー率61% (1594/2576)
いろいろ… getElementsByTagName()の結果は、単独の要素ではなくnodeListが返されます。 それなので、以降のlinks.～～などの属性は取得できませんしエラーになっていると思われます。 個々の要素を取得してループで処理するなどしてください。 http://www.atmarkit.co.jp/ait/articles/0805/08/news154.html arrayは定義されているのみで、処理に使用されていません。 ＞arrayに該当するデータだけを取り出すにはどうしたら良いのかが分かりません。 単純に各要素のhref属性と、arrayの各要素を比較して行くのではダメですか？ 判別処理をしないと、全部のリンク要素を対象としかねません。 ＞親要素をremoveChildで削除したいのですが～ 削除するのは良いですが、ご提示の例の場合、（HTMLの全体構成が不明ですが）最後のリンク要素の親要素はbodyのように見えますが、bodyごと全部削除することになりかねないのでは？ （↑DOCTYPEによっては文法違反ですけど…） また、removeChildは削除する要素の親要素に対して用いてください。
お礼
改めて頂いた回答に感謝致します。 nodeListについてや個々の要素を取得してのループ処理など、頂いたアドバイスを元に勉強していこうと思います。 特にnodeListについての勘違いは、早い段階で知る事ができてとても助かりました。 ありがとうございました。
補足
回答ありがとうございます。 nodeListは配列ではなくhtmlの構成を格納したものなんですね…。 >単純に各要素のhref属性と、arrayの各要素を比較して行くのではダメですか？ 予め決められたhtmlに適用するのではなく、UserScriptとして全てのサイトで利用したいのですが、この場合比較するにはどうしたら良いのでしょうか…？ >bodyごと全部削除することになりかねないのでは？ ごめんなさい、単純に間違えていたみたいです。 指摘して頂いて気付く事が出来ました。 細かなところまで見て頂いてありがとうございます。 >また、removeChildは削除する要素の親要素に対して用いてください。 そうしたいのですが、リストに該当するa要素の取り出し方が分からず…。 取り出したa要素にparentNodeを付けてそれをremoveChildする予定でしたが、nodeListなど根本から間違えていた様なので、Ogre7077さんに提示して頂いたコードを参考にもう少し勉強してみます。
お礼
改めて頂いた回答に感謝致します。 babu_babooさんのコードで要素を非表示にしたいという結果が得られたので、ベストアンサーとさせて頂きます。 ありがとうございました。
補足
回答ありがとうございます。 提示して頂いたコードでリンクを非表示にする事ができました。 しかし、私の理解がまだ十分ではないのと、質問自体に説明不足な部分もあるので、もう少しJavascriptに関して勉強をしてからまた後日に改めて投稿してみようと思います。