jquery - 使用 jQuery 重命名 Bootstrap 选项卡

Question

我已经设置了一个系统来使用 jQuery 动态创建新选项卡，因此当单击链接时它会创建一个新选项卡。每个选项卡的内容都设置为文本框。是否可以将选项卡的标题更改为文本框中输入的内容，最好是在他们键入时更改，而不是在必须单击 enter 或其他按钮之后更改？

我还有另一个问题，我不确定这是否需要一个新问题，但无论如何都可以。我还需要能够删除选项卡，最好是在单击链接时。我认为这是可能的，但我不太确定如何。到目前为止，我已经想到了一个 jQuery 函数，您可以在其中将选项卡的 ID 传递给它并删除链接和内容，但我真的不知道如何编写代码？

jsFiddle: http://jsfiddle.net/BenedictLewis/eYePA/

Info:
I am using Twitter Bootstrap with the theme Simplex from Bootswatch.
The CSS and JS files for Bootstrap are loaded from BootstrapCDN.

Answer 1

尝试

$('#tabContent').on('keyup', 'input[id^="pageTitle_tab"]', function(){
    var index  = $(this).closest('.tab-pane').index();
    $('#tabHeaders li:eq(' + (index + 1) + ') a').html(this.value)
})

演示:Fiddle