指定した配列と一致したデータを削除したい

解決済

質問者：mi-chika
質問日時：2014/06/24 02:37
回答数：3件

下記のような形でarrayに該当する文字列を含んだhrefとその親要素をremoveChildで削除したいのですが、hrefからarrayに該当するデータだけを取り出すにはどうしたら良いのかが分かりません。
何か良い方法がありましたらアドバイスを頂ければと思います。
よろしくお願い致します。

var array = [
"example.com",
"example.net",
"subdomain.example.org",
"example.jp/subdirectory"
];

var links = document.getElementsByTagName("a");
var href = links.getAttribute("href");
var parent = links.parentNode;
document.body.removeChild(取り出したデータ);

// html
<ul>
<li><a href="http://example.com ">A</a></li> 
<li><a href="http://example.net/subdirectory/post.html ">B</a></li> 
<li><a href="https://example.org ">C</a></li> 
<li><a href="http://example.jp/subdirectory/post.html ">D</a></li> 
</ul>

<a href="https://subdomain.example.org ">E</a>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3ベストアンサー

回答者： babu_baboo
回答日時：2014/06/25 16:09

消したい（親）要素に 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>

この回答への補足

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

提示して頂いたコードでリンクを非表示にする事ができました。
しかし、私の理解がまだ十分ではないのと、質問自体に説明不足な部分もあるので、もう少しJavascriptに関して勉強をしてからまた後日に改めて投稿してみようと思います。

補足日時：2014/06/26 23:25

通報する

- 0
- 件

通報する

この回答へのお礼

改めて頂いた回答に感謝致します。
babu_babooさんのコードで要素を非表示にしたいという結果が得られたので、ベストアンサーとさせて頂きます。
ありがとうございました。

通報する

お礼日時：2014/06/26 23:28

No.2

回答者： Ogre7077
回答日時：2014/06/24 14:12

// おまじない

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などでも対応できる様にするにはどうしたら良いですか？

補足日時：2014/06/25 09:29

通報する

- 0
- 件

通報する

この回答へのお礼

改めて頂いた回答に感謝致します。
提示して頂いたコードでは結果的に要素を非表示に出来なかったのですが、これは私の理解不足なのだと思います。
こちらのコードも参考にしながら、今後勉強を進めていこうと思います。
ありがとうございました。

通報する

お礼日時：2014/06/26 23:31

No.1

回答者： fujillin
回答日時：2014/06/24 10:24

いろいろ…

getElementsByTagName()の結果は、単独の要素ではなくnodeListが返されます。
それなので、以降のlinks.～～などの属性は取得できませんしエラーになっていると思われます。
個々の要素を取得してループで処理するなどしてください。
　http://www.atmarkit.co.jp/ait/articles/0805/08/n …

arrayは定義されているのみで、処理に使用されていません。
＞arrayに該当するデータだけを取り出すにはどうしたら良いのかが分かりません。
単純に各要素のhref属性と、arrayの各要素を比較して行くのではダメですか？
判別処理をしないと、全部のリンク要素を対象としかねません。

＞親要素をremoveChildで削除したいのですが～
削除するのは良いですが、ご提示の例の場合、（HTMLの全体構成が不明ですが）最後のリンク要素の親要素はbodyのように見えますが、bodyごと全部削除することになりかねないのでは？
（↑DOCTYPEによっては文法違反ですけど…）
また、removeChildは削除する要素の親要素に対して用いてください。

この回答への補足

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

nodeListは配列ではなくhtmlの構成を格納したものなんですね…。

>単純に各要素のhref属性と、arrayの各要素を比較して行くのではダメですか？
予め決められたhtmlに適用するのではなく、UserScriptとして全てのサイトで利用したいのですが、この場合比較するにはどうしたら良いのでしょうか…？

>bodyごと全部削除することになりかねないのでは？
ごめんなさい、単純に間違えていたみたいです。
指摘して頂いて気付く事が出来ました。
細かなところまで見て頂いてありがとうございます。

>また、removeChildは削除する要素の親要素に対して用いてください。
そうしたいのですが、リストに該当するa要素の取り出し方が分からず…。
取り出したa要素にparentNodeを付けてそれをremoveChildする予定でしたが、nodeListなど根本から間違えていた様なので、Ogre7077さんに提示して頂いたコードを参考にもう少し勉強してみます。

補足日時：2014/06/25 09:28

通報する