jquery-ui のタブを閉じられるようにして、リストの要素をクリックしたときに重複を許さずタブを追加していく

closable_tab.js

// requires jquery-ui.

function closable_tab (tab_container_id, tab_config) {
    // 閉じるボタン付きのタブコントロール
    var tab_container = $(tab_container_id);
    var tab_list = tab_container.find('ul');
    // タブ追加用のハンドラ
    function _add_page (evt) {
	console.log(evt);
	var id = tab_config.get_id(evt.currentTarget);
	var tab_id = '_tab_'+id;
	var tab_id_ref = '#'+tab_id;
	// すでにロードされているタブがあるときはタブを追加しない
	if (tab_container.find(tab_id_ref).length==0) {
	    // タブ要素 (<li>) を生成する
	    var li = document.createElement('li');
	    // li の下のアンカー
	    var anchor = document.createElement('a');
	    anchor.textContent = tab_config.get_title(evt.currentTarget);
	    anchor.href = tab_id_ref;
	    li.appendChild(anchor);
	    // 閉じるアイコン
	    var icon = document.createElement('i');
	    icon.setAttribute('class', 'icon-cancel-2'); // ゴメンこのアイコン MetroUI のやねん
	    li.appendChild(icon);
	    tab_list.append(li);
	    // タブコンテンツ (<div>) を生成する
	    var page = document.createElement('div');
	    page.id = tab_id;
	    tab_config.load_content(id, $(page));
	    tab_container.append(page);
	    // 閉じるボタンにページを削除するためのハンドラを結びつける
	    $(icon).on('click', {tab_id: tab_id}, _remove_page);
	}
	// タブを再構成する
	tab_container.tabs().tabs('refresh');
	// 追加しようとしたタブの index を調べて、 active にする
	var page_index = $(tab_id_ref, tab_container).index()-1;
	console.log('selecting #', page_index);
	tab_container.tabs().tabs('option', 'active', page_index);
    };

    // タブ消去用のハンドラ
    function _remove_page(evt) {
	var tab_id = evt.data.tab_id;
	var tab_id_ref = '#'+tab_id;
	// タブの参照するページを除去する
	$('div'+tab_id_ref, tab_container).remove();
	// href="_tab_XX" に一致するアンカーの、一つ上の li を除去する
	$('[href='+tab_id_ref+']', tab_list).closest('li').remove();
	tab_container.tabs().tabs('refresh');
    };

    // コンテナノードをタブ化する
    tab_container.tabs();
    // ページの追加・削除用のハンドラを返す
    return { add_page: _add_page, remove_page: _remove_page };
};

page.html

    <script src="closable_tab.js"></script>
    <script>
    $(document).ready(function() {

      tab_config = {
          get_id: function (sel) {
              return $('td', sel).eq(0)text();
          },
          get_title: function(sel) {
              return $('td', sel).eq(1).text();
          },
          load_content: function (id, page_selector) {
              page_selector.text('This is for '+id);
          },
      };
      ct_handlers = closable_tab('#my-tab', tab_config);
      $('#object-list tbody').on('click', 'tr', ct_handlers.add_page);

    });
    </script>
    <table id="object-list">
      <thead>
	<tr>
	  <th>ID#</th>
	  <th>Username</th>
	  <th>Full Name</th>
        </tr>
      </thead>
      <tbody>
        ...
      </tbody>
    </table>

    <div id="my-tab">
      <ul class="tabs" id="tab-list">
      </ul>
    </div>