表示したくないHTMLを削除するJavascript

ブログなどで作成したページで、ブログシステムで自動的に追加出力されるHTMLで、表示したくないものがある場合に、それを削除するJavascriptコードです。

id名で指定して削除

以下のコードでは、id=”id2″ をもつエレメントを探して、削除しています。
このため、5行目の

<div id="id2">text2</div>

の部分が削除され、表示されなくなります。

<html>
<body>

  <div id="id1">text1</div>
  <div id="id2">text2</div>
  <div id="id3">text3</div>

<script type="text/javascript">
var node = document.getElementById('id2');
if(node != null){
        //console.log("remove node=" + node.id);
	node.parentNode.removeChild(node);
}
</script>

</body>
</html>

class属性の値で指定して削除

次は、class属性で削除する場合のコードです。
以下のコードでは、divタグで class=”class2″ の属性をもつエレメント削除しています。
このため、5行目の

 <div class="class2">text2</div>

の部分が削除され、表示されなくなります。
(2013/01/25)対象Classが複数ある場合に先頭から消すとノードがずれていってしまうため、ノード検索のforループを最後から回して、末尾から消すように変更しました。

<html>
<body>

  <div class="class1">text1</div>
  <div class="class2">text2</div>
  <div class="class3">text3</div>

<script type="text/javascript">
var divNode = document.getElementsByTagName("div");
for (i = divNode.length-1; i  >= 0 ;i--) {
   node = divNode[i];
   //console.log("(" + i + ")class name :" + node.className);
   if(node.className == "rlimg"){
   	//console.log("^^^^^^^^^^^^^remove");
   	node.parentNode.removeChild(node);
   }
}
</script>

</body>
</html>
↓ 参考になるブログがたくさんあります!ぜひどうぞ! ↓
にほんブログ村 その他日記ブログ 日々のできごとへ

スポンサーリンク