Can't seem to cleanup detached DOM elements

Question

I\'m using jquery-ui Tabs and I\'m having a problem that occurs when a tab has been removed. The tab appears to be removed, along with its content div but when you take a look a

Answer 1

So I eventually fixed this problem (quite some time ago) by doing two things:

1. Ditching jQueryUI in favor of Bootstrap

2. Changing the closeTab function (see the original jsFiddle) to the following:

   closeTab: function (e) {
       e.stopPropagation();
       e.preventDefault();
       this.model.collection.remove(this.model);
       this.close();
   }
   

In that snippet, stopPropagation and preventDefault are really what stopped this element from remaining detached (and accumulating on subsequent adds/removes) in the DOM. To summarize: this problem was created by not calling stopPropagation/preventDefault on the event object after it was triggered. I've updated the jsFiddle so that it correctly removes the tab elements and for posterity, here's a screenshot of the result:

As you can see, none of the tab elements are remaining detached after clicking the "X" to close them. The only detached elements are the ones that come from jsFiddle's interface.