JavaScript や jQuery を使って HTML に動的な処理を施していくと、HTML の各要素に[style属性]が書き加えられていきます。
この追加された[style属性]を削除する方法を紹介します。

使用するのは jQuery メソッドの[removeAttr]です。

[removeAttr]を使うとjQuery オブジェクトで指定した要素から引数に指定した属性を削除することができます。

例えば、<div id=”header”>〜</div> 内に加えられた style属性を削除する場合、以下のように記述します。

$('#header *').removeAttr('style');

ポイントは、オブジェクトで $('#header *') と指定すること。
「*」で「#header」内のすべての要素を取得している仕組みです。


前述したように、[removeAttr]メソッドは「引数に指定した属性を削除することができる」ので、例えばアンカータグのターゲット属性を削除したり、任意のidやclassの設定を解除したい場合に、以下のように記述して使うことができます。

// ターゲット属性を削除したい場合
$("a").removeAttr("target");

// id属性を削除したい場合
$("div").removeAttr("id");

// class属性を削除したい場合
$("div").removeAttr("class");

処理の途中で設定を解除したい場合など、使いどころは多々あると思います。
覚えておいて損はないですよ!


関連本。jQueryについて学ぶなら、こちらの書籍がオススメです。