<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
form{
width: 200px;
height: 100px;
border: 1px solid red;
}
div{
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid green;
}
.active{
background-color: #8B4513;
}
</style>
</head>
<body>
<form action="">
<div>1</div>
<div>2</div>
<div>3</div>
<button disabled>кнопка</button>
</form>
<script>
document.querySelector('form').addEventListener("click", function(e){
var target = e.target;
if (target.tagName === 'DIV') target.classList.toggle('active');
else if (target.tagName === 'BUTTON') document.querySelectorAll('div.active').forEach(el => el.parentNode.removeChild(el));
else document.querySelectorAll('div').forEach(el => el.classList.remove("active"));
document.querySelector('button').disabled = !document.querySelector('div.active');
});
</script>
</body>
</html>