ブログなどで作成したページで、ブログシステムで自動的に追加出力されるHTMLで、表示したくないものがある場合に、それを削除するJavascriptコードです。
id名で指定して削除
以下のコードでは、id=”id2″ をもつエレメントを探して、削除しています。
このため、５行目の
<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″ の属性をもつエレメント削除しています。
このため、５行目の
<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>
コメント