jQueryが実行されるたびにtable内をリセットしたい

前提・実現したいこと

jQueryが実行されるたびにtableの中身を動的に変更したいのですが、
実行されるたびにtable内の値が増えてしまいます。
毎回table内をリセットさせたいです。
ご教授お願い致します。

該当のソースコード

javascript
1function monthsSelect(obj){
2  var objVar = obj.value;
3  $.ajax({
4    "type"     : "GET",
5    "url"      : "baseSalaryMonth",
6    "data"     : {baseSalaryMonthStr: objVar},
7    "dataType" : "json",
8  }).then(
9  		function (data) {
10    $('#t1').append($('<thead>')).append($('<tbody>'));
11    $('<tr>')
12      .append($('<th>').attr('id','userId').text('aa'))
13      .append($('<th>').attr('id','fullNm').text('bb'))
14      .append($('<th>').attr('id','baseSalary').text('cc'))
15      .appendTo($('#t1 thead'));
16    data.forEach(function(x){
17      $('<tr>')
18        .append($('<td>').text(x.userId))
19        .append($('<td>').text(x.fullNm))
20        .append($('<td>').append($('<input type="text" name = "baseSalary">').val(x.baseSalary)))
21        .appendTo($('#t1 tbody'));
22    });
23  },
24	function () {
25	//通信失敗
26	alert("読み込み失敗");
27});
28};

html
1<!DOCTYPE html>
2<html lang="ja" xmlns:th="http://www.thymeleaf.org"
3	xmlns:sec="http://www.thymeleaf.org/extras/spring-security4">
4<head>
5<meta charset="UTF-8">
6<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
7<script src="/js/sampleJs.js" th:src="@{/js/baseSalary.js}"></script>
8</head>
9<body>
10<h1>ページ</h1>
11	<form method="post">
12		<select id="getMonthsSelect" name="getMonthsSelect" onChange="monthsSelect(this)">
13        <option th:each="item : ${getMonthsSelect}"
14            th:value="${item.key}"
15            th:text="${item.value}">singleSelect</option>
16    	</select><br>
17    </form>
18    <form method="post" th:action="@{/baseSalaryUpd}">
19		<table id="t1"></table>
20		<p><input type="submit" value="更新"></p>
21	</form>
22</body>
23</html>

試したこと

remove()等でtr内を削除する処理を入れるなどしたのですが、うまくいかず。。。

補足情報（FW/ツールのバージョンなど）

jquery1.9.1

kei344

2018/12/10 13:48

HTMLも提示してください。

takahiro00

2018/12/10 13:50

はいHTMLも載せました。

行動規範の内容に同意します

回答2件

すでに解決となっていますが、jQueryには専用のメソッドがあるので紹介しておきます。
.empty()
https://api.jquery.com/empty/

投稿2018/12/12 09:26

x_x

総合スコア13749

takahiro00

2018/12/12 13:25

ありがとうございます！

行動規範の内容に同意します

ベストアンサー

$('#t1').html(''); みたいに消してしまえばよいのでは。

HTML
1<table id="t1"></table>

js
1var a = 0;
2$('body').on( 'click', function() {
3  $('#t1').html(''); // 消してしまえばよいのでは。
4  $('#t1').append($('<thead>')).append($('<tbody>'));
5  $('<tr>')
6    .append($('<th>').attr('id','userId').text('aa'))
7    .append($('<th>').attr('id','fullNm').text('bb'))
8    .append($('<th>').attr('id','baseSalary').text('cc'))
9    .appendTo($('#t1 thead'));
10  $('<tr>')
11    .append($('<td>').text(a++))
12    .append($('<td>').text(a++))
13    .append($('<td>').append($('<input type="text" name = "baseSalary">').val(a++)))
14    .appendTo($('#t1 tbody'));
15}).trigger( 'click' );
16```**動くサンプル：**[https://jsfiddle.net/n0Ltu8so/](https://jsfiddle.net/n0Ltu8so/)