デモページはこちら

jQueryのremoveAttrメソッドとremoveDataメソッドで要素の属性を削除します。removeDataメソッドはカスタムデータ属性のみ削除できます。removeAttrメソッドとremoveDataメソッドは機能が似ていますが細かい部分で異なります。

以下のhtmlの構造でテストします。

<ul>
	<li data-name="html_css" data-num="01">HTML・CSS</li>
	<li data-name="sass" data-num="02">Sass</li>
</ul>
<p class="title">最初の要素のdata-name属性を削除</p>
<input type="button" class="btn01" value="removeAttr">
<input type="button" class="btn02" value="removeData"><br><br>
<p class="title">最初の要素のdata-name属性を取得</p>
<input type="button" class="btn03" value="attr">
<input type="button" class="btn04" value="data"><br><br>
<p class="title">2番目の要素のdata-name属性に空の値を設定</p>
<input type="button" class="btn05" value="attr">
<input type="button" class="btn06" value="data"><br><br>
<p class="title">2番目の要素のdata-name属性を取得</p>
<input type="button" class="btn07" value="attr">
<input type="button" class="btn08" value="data"><br><br>
<input type="button" class="btn09" value="リロードしてリセット">

まずremoveAttrメソッドで最初の要素のdata-name属性を削除します。removeAttrメソッドを実行するとソース上から属性と属性値が削除されます。attrメソッドとdataメソッドでdata-name属性を取得すると、どちらも結果はundefinedになります。ただしカスタムデータ属性がキャッシュされている場合は削除できません。

次にremoveDataメソッドで最初の要素のdata-name属性を削除します。removeDataメソッドを実行してもソース上から属性と属性値は削除されず、キャッシュされているカスタムデータ属性が削除されます。ですがソース上にカスタムデータ属性が記述されていてる場合は削除されません。そのためattrメソッドとdataメソッドでdata-name属性を取得すると、どちらも属性値が取得できます。

次にremoveAttrメソッドとremoveDataメソッドを続けて実行して、最初の要素のdata-name属性を削除します。attrメソッドとdataメソッドでdata-name属性を取得すると、どちらも結果はundefinedになります。これでキャッシュされているカスタムデータ属性も含め、完全に属性が削除できています。

removeAttrメソッドとremoveDataメソッド両方を実行するのではなく、attrメソッドまたはdataメソッドで2番目の要素のdata-name属性に空の値を設定します。attrメソッドまたはdataメソッドでdata-name属性を取得すると、それぞれで設定した空の値が取得できます。属性値を削除する場合この方法が簡単です。

$(function() {
	$('.btn01').on('click', function() {
		var result01 = $('ul').children('li:first');
		$(result01).removeAttr('data-name');
	});
	$('.btn02').on('click', function() {
		var result02 = $('ul').children('li:first');
		$(result02).removeData('name');
	});
	$('.btn03').on('click', function() {
		var result03 = $('ul').children('li:first');
		console.log($(result03).attr('data-name'));
	});
	$('.btn04').on('click', function() {
		var result04 = $('ul').children('li:first');
		console.log($(result04).data('name'));
	});
	$('.btn05').on('click', function() {
		var result05 = $('ul').children('li:nth-child(2)');
		$(result05).attr('data-name', '');
	});
	$('.btn06').on('click', function() {
		var result06 = $('ul').children('li:nth-child(2)');
		$(result06).data('name', '');
	});
	$('.btn07').on('click', function() {
		var result07 = $('ul').children('li:nth-child(2)');
		console.log($(result07).attr('data-name'));
	});
	$('.btn08').on('click', function() {
		var result08 = $('ul').children('li:nth-child(2)');
		console.log($(result08).data('name'));
	});
	$('.btn09').on('click', function() {
		location.reload();
	});
});