Creating a closeable tab

Question

In jQuery, I have created a dynamic tab named closedable-tab. I want to have a "close" icon showm in this tab, and if I click it, the tab will be closed.

How to implement that?

<ul class="nav nav-tabs">
  <li role="presentation" class="">
    <a class="tabs-li" href="/online_issues/index">tab1</a>
  </li>
  <li role="presentation">
    <a class="tabs-li" href="/online_issues/index">tab2</a>
  </li>
  <li role="presentation">
    <a class="tabs-li" href="/online_issues/index">tab3</a>
  </li>
  <li role="presentation">
    <a class="tabs-li" href="/online_issues/index">tab4</a>
  </li>
  <li role="presentation" class="active"> 
    <a class="tabs-li closeable-tab-li" href="/online_issues/index">closeable-tab</a>
  </li>  
</ul>

Below is an image illustrating the desired result:

@SusheelSingh, Actually, I am ok with both `close` and `remove`. Is there an way to do that? I am new to jQuery. — mainframer, Oct 25 '15 at 05:48

score 1 · Answer 1 · answered Oct 25 '15 at 05:36

1

The manipulation tab maybe what you want: https://jqueryui.com/tabs/#manipulation

answered Oct 25 '15 at 05:36

Natural Lam

732
4
13

Creating a closeable tab

1 Answers1