クラス名（class属性に値）を削除

クラス名（class属性に値）を削除するには、element.classList.removeメソッドを使用します。

※ IE9以下は対応していません。

構文

element.classList.remove(targetClassName);

引数名		型	説明
第一引数必須	targetClassName	string	削除するクラス名

JavaScript

var sampleElement = document.getElementById('sample');

sampleElement.classList.remove('foo');

IE9以下に対応させる場合

IE9以下に対応させる場合は、次のようにすることで対応が可能です。

関数定義

JavaScript

/**
 * クラス名（class属性に値）を削除
 * @param {Element|Node} element 対象の要素
 * @param {string} classNameValue 削除するクラス名
 * @return {Element|Node} クラス名が削除された要素を返す
 */
var removeClassName = function(element, classNameValue) {
	if (!element || !element.className || typeof classNameValue !== 'string') return element;

	if (element.classList) {
		element.classList.remove(classNameValue);
	} else {
		var classNames   = element.className.replace(/^\s+|\s+$/g, '').split(' '),
		    hasClassName = false;

		var inArray = function(searchValue, arrayData) {
			if (typeof searchValue === 'undefined' || typeof arrayData !== 'object') return -1;

			for (var key in arrayData) {
				if (arrayData[key] === searchValue) return key;
			}

			return -1;
		};

		if (inArray(classNameValue, classNames) === -1) return element;

		if (classNames.toString() === '') classNames = [];

		for (var i = 0, len = classNames.length; i < len; i++) {
			if (classNames[i] !== classNameValue) continue;

			classNames.splice(i, 1);
			hasClassName = true;
			break;
		}

		if (hasClassName) element.className = classNames.join(' ');
	}

	return element;
};

使い方

引数

引数		型	説明
第一引数必須	element	node	クラス名を削除したい要素
第二引数必須	classNameValue	string	削除するクラス名

戻り値

第一引数で指定したエレメントが返ってきます。

JavaScript

var sampleElement = document.getElementById('sample');

removeClassName(sampleElement, 'foo');

JavaScript逆引きリファレンス一覧へ戻る