問題21:要素から属性を削除しよう
[data-delete]をclickしたら
その属性を削除しよう
その属性を削除しよう
あらかじめエディタに書くコード
<div data-delete="id">idを削除</div>
<div data-delete="class">classを削除</div>
<div id="red" class="blue" data-delete-target>忍者CODE</div>
¥HTML¥
.blue{
color:blue;
}
#red{
color:red;
}
¥CSS¥
期待する画面
解答ソースコード
$(function(){
$('[data-delete]').on('click', function(){
let my_attr = $(this).attr('data-delete');
$('[data-delete-target]').attr(my_attr, '');
});
});
¥JavaScript¥
<html lang="">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
.blue{
color:blue;
}
#red{
color:red;
}
</style>
</head>
<body>
<div data-delete="id">idを削除</div>
<div data-delete="class">classを削除</div>
<div id="red" class="blue" data-delete-target>忍者CODE</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</body>
</html>
¥HTML¥
完了にする!
活動記録をTweetする
1.JavaScriptでできること
そのまま変数にして、属性を削除すればコンパクトに書くことができる。