jQuery | テキストボックスに入れた値をクリアする

目次

経緯

テキストボックスの値をクリアする

経緯

目次ジェネレータという、目次を作るためのHTMLを自動生成するブラウザアプリを作っていたのですが、
入力をミスったときとか、新しいHTMLを生成したいときに項目をいちいちBackspaceを押しながら消していくのが面倒だと思いました。

こんな風に、値を入力したとして・・・

f:id:sho322:20140718130618j:plain

はっと間違っていることに気付く・・・

そのときに、「入力をクリアする」というボタンを押せば、

f:id:sho322:20140718130630j:plain

入力を消すことができる！

こんな機能を作りたいと思いました。

テキストボックスの値をクリアする

まずボタンですが、以下のように書きます。
Bootstrapを使っています。

<div class="btn-group">
  <button type="button" class="btn btn-info" id="inputClearBtn">入力をクリアする</button>
</div>

そいで、このボタンが押されたら、clearInputInfoという関数を呼びます。

  $("#inputClearBtn").on("click", function() {
  	clearInputInfo();
  });

その関数がこちらです。

  var clearInputInfo = function () {
    $("#mokujiTable tbody > tr").each(function() {
      $(this).find('input.komoku').val('');
      $(this).find('input.tag').val(''); 
    });
  };

テーブルに設定したid="mokujiTable"を指定して、そのtbodyの子要素であるtrをグルグル走査します。
それで、走査したうち、input の class="komoku"を設定したものと、
class="tag"を設定したものの値を空にしています。

抜粋ですが、テーブルのところはこんな感じで、tdの中にテキストボックスを入れています。
classにtagとか、komokuを設定していますね。

  <tbody>
    <tr>
      <td class="tdclass"><input type="text" class="form-control intable komoku" placeholder="目次の項目を入れてください"></td>
      <td class="tdclass"><input type="text" class="form-control intable tag" placeholder="タグに設定する名前を入れてください"></td>
    </tr>