When I click on number 2, it deletes the second column, which is working correctly. However, when I click on number 3, it deletes the number 3 instead of its column. The code snippet causing this issue is shown below:
Can someone assist me in identifying what is wrong here?
$(document).on('click',".button", function( event){
var attrNumColumn = $(this).attr('attrnum');
$(".button[attrnum='"+attrNumColumn+"']").remove();
//console.log($(this).attr('attrnum'));
var attrNumColumnMinus = parseInt($(this).attr('attrnum')-1);
$('tr').each(function(){
$(this).children("td:eq("+attrNumColumnMinus+")").remove();
});
});.button {
height: 25px;
width: 10px;
}
.button:hover {
color: #c30202;
cursor:pointer;
}<div class="button" attrnum='1'> 1 </div>
<div class="button" attrnum='2'> 2 </div>
<div class="button" attrnum='3'> 3 </div>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>