Low_Weaper,
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<title></title>
<style>
.product {
color: red;
}
</style>
</head>
<body>
<table>
<tr class="product">
<td>
<span id="down">-</span>
<input type="text" value="0" label="name" id="counter">
<span id="up">+</span>
</td>
</tr>
</table>
<script>
var down = document.getElementById('down');
var up= document.getElementById('up');
var counter= document.getElementById('counter');
var product = document.getElementsByClassName('product')[0];
down.addEventListener('click', function (event) {
counter.value = counter.value - 1 ;
if(counter.value == 0) product.classList.toggle('product');
});
up.addEventListener('click', function (event) {
counter.value = +counter.value + 1 ;
if(counter.value == 1) product.classList.toggle('product');
})
</script>
</body>
</html>