<div id="wrap">
<!-- section -->
<div class="section">
<div class="section__center">
<div class="section__contents">
<table id="table">
<tbody>
<tr>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<a href="#">the-link</a>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
</tr>
<tr>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
</tr>
<tr>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
</tr>
<tr>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<a href="#">the-link</a>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
</tr>
<tr>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<a href="#">the-link</a>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
</tr>
<tr>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
</tr>
<tr>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
</tr>
<tr>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<a href="#">the-link</a>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
</tr>
<tr>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
</tr>
<tr>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
<td class="el">
<div>
<a href="#">the-link</a>
</div>
</td>
<td class="el">
<div>
<span>cell</span>
</div>
</td>
</tr>
</tbody>
</table>
<button id="button"><span>Hide rows with links</span></button>
</div>
</div>
</div>
<!--/section -->
</div>
html,
body {
cursor: default;
font-size: 18px;
font-family: monospace;
background-color: #fff;
color: #333;
}
* {
box-sizing: border-box;
outline: none;
}
#wrap {
width: 100%;
position: relative;
}
.section {
padding: 60px 0;
position: relative;
&__center {
width: 100%;
max-width: 1024px;
margin: 0 auto;
}
&__contents {
width: 100%;
height: 100%;
padding: 0 20px;
}
}
#table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
tbody {
tr {
td {
padding: 10px;
border: 1px solid #ddd;
}
&.hidden {
display: none;
}
}
}
}
#button {
display: block;
margin-top: 20px;
border: 0;
padding: 10px 20px;
font-family: inherit;
font-size: 18px;
font-weight: 700;
cursor: pointer;
}
View Compiled
$(function () {
var $table = $('#table'),
$button = $('#button');
$button.click(function () {
var $rowWithLink = $table.find('a:contains("the-link")').parents('tr');
$rowWithLink.addClass('hidden');
});
});
This Pen doesn't use any external CSS resources.