要素に設定された属性を削除(removeAttribute)

Element オブジェクトの removeAttribute メソッドを使用することで要素に設定されている属性を削除することができます。ここでは removeAttribute メソッドの使い方について解説します。

(Last modified: )

属性を削除する

Element オブジェクトの removeAttribute メソッドは、対象の要素に設定されている属性を削除します。書式は次のとおりです。 

element.removeAttribute(qualifiedName)

引数には削除する属性の属性名を DOMString オブジェクトで指定します。設定されていない属性名を指定した場合は何も行いません。

例えば要素ノードに設定されている class 属性を削除するには次のように記述します。 

let element = document.getElementById('xxx');
element.removeAttribute('class');
サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性の削除</title>
</head>
<body>

<p>今日は外でランチを食べました。</p>

<div id="shopinfo">
  <a href="http://www.example.com/" target="_black" class="address">リストランテ南青山</a>
  <div>東京都港区南青山</div>
</div>

<p>美味しかったです。</p>

<button onClick="getElement();">属性を削除</button>

<script>
function getElement(){
    let element = document.getElementById('shopinfo').children[0];
    element.removeAttribute('target');
    element.removeAttribute('class');

    let attrs = element.attributes;
    for(let i = 0 ; i < attrs.length ; i++) {
        console.log('属性名：' + attrs.item(i).name);
        console.log('属性値：' + attrs.item(i).value);
    }
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードを取得し、最初の子要素に設定されている属性の中で class 属性と target 属性を削除します。そのあとで残っている属性を取得し名前と値をコンソールに出力します。

要素に設定された属性を削除(removeAttribute)(1)

-- --

removeAttribute メソッドの使い方について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。