JavaScript removeAttribute()メソッド

概要: このチュートリアルでは、JavaScriptのremoveAttribute()メソッドを使用して、要素から指定された名前の属性を削除する方法を学習します。

JavaScript removeAttribute()メソッドの紹介

removeAttribute()メソッドは、指定された名前の属性を要素から削除します。

element.removeAttribute(name);Code language: CSS (css)

パラメータ

removeAttribute()は、削除する属性の名前を引数として受け取ります。属性が存在しない場合、removeAttribute()メソッドはエラーを発生させません。

戻り値

removeAttribute()はundefinedを返します。

使用方法に関する注意

HTML要素には、ブール属性と呼ばれるいくつかの属性があります。

ブール属性にfalseを設定するには、単純にsetAttribute()メソッドを使用することはできません。removeAttribute()メソッドを使用して属性を完全に削除する必要があります。

たとえば、以下の場合、disabled属性の値はtrueになります。

<button disabled>Save Draft</button>
<button disabled="">Save</button>
<button disabled="disabled">Cancel</button>Code language: HTML, XML (xml)

同様に、以下のreadonly属性の値はtrueになります。

<input type="text" readonly>
<textarea type="text" readonly="">
<textarea type="text" readonly="readonly">Code language: HTML, XML (xml)

JavaScript removeAttribute()メソッドの例

次の例では、removeAttribute()メソッドを使用して、idがjsのリンク要素からtarget属性を削除します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS removeAttribute() Demo</title>
</head>
<body>
    <a href="https://javascripttutorial.dokyumento.jp" 
       target="_blank" 
       id="js">JavaScript Tutorial</a>

    <script>
        let link = document.querySelector('#js');
        if (link) {
            link.removeAttribute('target');
        }
    </script>
</body>
</html>Code language: HTML, XML (xml)

動作方法

querySelector()メソッドを使用して、idがjsのリンク要素を選択します。
選択されたリンク要素に対してremoveAttribute()を呼び出すことで、リンクのtarget属性を削除します。

まとめ

removeAttribute()を使用して、指定された要素から属性を削除します。
ブール属性の値をfalseに設定しても機能しません。代わりにremoveAttribute()メソッドを使用してください。

クイズ

このチュートリアルは役に立ちましたか？