<div class="wrap">
    <button class="btn jq-removeBtn">Remove</button>
    <p class="text">這是一段文字，點擊按鈕後我會被隱藏。</p>
    <br><br>

    <table>
      <thead>
        <tr>
          <th>NAME</th>
          <th>PHONE</th>
          <th>EMAIL</th>
          <th>OHTER</th>
          <th>DELETE</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Tim</td>
          <td>0912-345678</td>
          <td>tim@email.com</td>
          <td></td>
          <td><button class="btn jq-delete">刪除</button></td>
        </tr>

        <tr>
          <td>Tim</td>
          <td>0912-345678</td>
          <td>tim@email.com</td>
          <td></td>
          <td><button class="btn jq-delete">刪除</button></td>
        </tr>

        <tr>
          <td>Tim</td>
          <td>0912-345678</td>
          <td>tim@email.com</td>
          <td></td>
          <td><button class="btn jq-delete">刪除</button></td>
        </tr>

        <tr>
          <td>Tim</td>
          <td>0912-345678</td>
          <td>tim@email.com</td>
          <td></td>
          <td><button class="btn jq-delete">刪除</button></td>
        </tr>
      </tbody>

    </table>
  </div>

$primary: #3d82ad;
$white: #fff;
$text: #333;
$blue: #5fbfff;
$green: #00aa00;
$yellow: #daa520;
$orange: #ff8800;
$pink: #faaad1;
$red: #fa5858;
$darkRed: #a11313;

body {
  box-sizing: border-box;
}

.wrap {
  margin: 0 auto;
  width: 720px;
}
.btn {
  padding: 5px 10px;
}
p{
  padding: 10px 0;
}

th,
td {
  border: 1px solid #222;
  text-align: center;
  padding: 10px;
}

th {
  background-color: $primary;
  color: $white;
}

$(function () {
  //隱藏文字
  $('.jq-removeBtn').click(function (e) {
    e.preventDefault();
    $('.text').hide();
  });

  //刪除 tr
  $('.jq-delete').click(function () {
    $(this).parent().parent().remove();
  });

});