Bootstrap选项卡在隐藏时清除模型

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1">选项卡1</a></li>
  <li><a data-toggle="tab" href="#tab2">选项卡2</a></li>
  <li><a data-toggle="tab" href="#tab3">选项卡3</a></li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    <h3>选项卡1 内容</h3>
    <input type="text" id="input1" placeholder="输入内容">
    <button onclick="clearInput('input1')">清除输入</button>
  </div>
  <div id="tab2" class="tab-pane fade">
    <h3>选项卡2 内容</h3>
    <input type="text" id="input2" placeholder="输入内容">
    <button onclick="clearInput('input2')">清除输入</button>
  </div>
  <div id="tab3" class="tab-pane fade">
    <h3>选项卡3 内容</h3>
    <input type="text" id="input3" placeholder="输入内容">
    <button onclick="clearInput('input3')">清除输入</button>
  </div>
</div>

function clearInput(inputId) {
  document.getElementById(inputId).value = "";
}

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href");
  if (target !== "#tab1") {
    clearInput("input1");
  }
  if (target !== "#tab2") {
    clearInput("input2");
  }
  if (target !== "#tab3") {
    clearInput("input3");
  }
});