jQuery: Resize header on delete cells

On delete header cells change size of header to prevent disorganized table.

by Porfirio Chavez

HTML

<h2>
Hide cells on click
</h2>
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th colspan="5" class="title">Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Info A</td>
      <td class="borrar">Info 1</td>
      <td class="borrar">Info 2</td>
      <td class="borrar">Info 3</td>
      <td class="borrar">Info 4</td>
      <td class="borrar">Info 5</td>
      <td>Info B</td>
    </tr> 
  </tbody>
</table>
<hr>
<br>
<p>
<strong>Note: </strong> Click on Info 1-5 to hide cell press button to rearrange
</p>
<button>
Show All
</button>

CSS

body {
  background-color: #f9ecec;
  font-family: 'verdana', sans-serif;
}

table {
  border: solid 1px #c8d9eb;
  width: 350px;
}

th {
  border-bottom: solid 2px green;
}

td{
   width: 100px;
}

.borrar {
  cursor: w-resize;
}

JavaScript

function showAll(){
	$('.borrar').css('display', 'table-cell');
  $(".title").show();
  $(".title").attr('colspan', '5');
}

$(document).ready(function(){
    $(".borrar").on("click", function(e){
        $(e.currentTarget).css("display","none");
        var columns = $(".title").attr("colspan");
        var newColSpan = columns - 1;
        if(columns <= 1){
        	$(".title").hide();
        }
        $(".title").attr("colspan", ""+newColSpan+"");
    });
    
    $('button').on('click', showAll);
});