ksuzushima/jquery.3.3_addclass.html

## jquery.3.3_addclass.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery 3.3 addClass, removeClass</title>
</head>
<body>


<h1 class="elm">jQuery 3.3 addClass, removeClass</h1>

<button id="js-add">Add Multiple Classes</button>
<button id="js-remove">Remove Multiple Classes</button>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  const $elm = $('.elm');
  const $add = $('#js-add');
  const $remove = $('#js-remove');

  $add.on('click', () => {
    // <h1 class="elm el-1 el-2 el-3">jQuery 3.3 addClass, removeClass</h1>
    $elm.addClass(['el-1', 'el-2', 'el-3']);
  });

  $remove.on('click', () => {
    // <h1 class="elm el-2">jQuery 3.3 addClass, removeClass</h1>
    $elm.removeClass(['el-1', 'el-3']);
  });
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>jQuery 3.3 addClass, removeClass</title>
	</head>
	<body>


	<h1 class="elm">jQuery 3.3 addClass, removeClass</h1>

	<button id="js-add">Add Multiple Classes</button>
	<button id="js-remove">Remove Multiple Classes</button>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
	const $elm = $('.elm');
	const $add = $('#js-add');
	const $remove = $('#js-remove');

	$add.on('click', () => {
	// <h1 class="elm el-1 el-2 el-3">jQuery 3.3 addClass, removeClass</h1>
	$elm.addClass(['el-1', 'el-2', 'el-3']);
	});

	$remove.on('click', () => {
	// <h1 class="elm el-2">jQuery 3.3 addClass, removeClass</h1>
	$elm.removeClass(['el-1', 'el-3']);
	});
	});
	</script>
	</body>
	</html>