Jquery 从HTMLDOM中动态添加和删除元素_Jquery_Html_Dom_Tabs

Jquery 从HTMLDOM中动态添加和删除元素

jquery html dom tabs

Jquery 从HTMLDOM中动态添加和删除元素,jquery,html,dom,tabs,Jquery,Html,Dom,Tabs,我正在处理一个HTML页面，其中有一个表中的项目列表，单击一个项目时，会生成一个新选项卡，显示所单击项目的详细信息。我正在使用jquery ui选项卡动态创建选项卡。仅当某个项目的选项卡不存在时，我才需要打开该项目的选项卡。我使用下面的代码来实现这一点 if(! $('#selector').length ) { //create new tab for the item } 我为每个项目使用具有唯一id的选项卡。这段代码在第一次加载tab时起作用，问题是我还有一个X按钮来关闭该选项卡，

我正在处理一个HTML页面，其中有一个表中的项目列表，单击一个项目时，会生成一个新选项卡，显示所单击项目的详细信息。我正在使用jquery ui选项卡动态创建选项卡。仅当某个项目的选项卡不存在时，我才需要打开该项目的选项卡。我使用下面的代码来实现这一点

if(! $('#selector').length )
{
   //create new tab for the item
}

我为每个项目使用具有唯一id的选项卡。这段代码在第一次加载tab时起作用，问题是我还有一个X按钮来关闭该选项卡，然后单击该按钮，我使用jquery.remove（）函数从HTMLDOM中删除选项卡分区。这样就可以删除选项卡，但当我在删除一次后尝试为特定项目添加选项卡时。那么上面的代码就不起作用了，它表明这个标签已经存在了。并且未创建新选项卡。如何从HTMLDOM中完全删除一个元素，以便在删除一次后，上面的代码可以用于重新创建选项卡。提前谢谢你的帮助

<body>
    <div id='tabs'>

        <ul>

        </ul>

    </div>
</body>
<script>
    $(document).ready(function(){ 

        $("#tabs").tabs();

        $(document).on('click', '.clickable_sellername', function(){

            debugger;
            var sellerid = parseInt(this.id.split('_')[2]);
            var sellername = $(this).text();

            if($('#tabindex_'+sellerid).length == 0){

                $.ajax({
                    type:"GET",
                    url :"/myadmin/loadprofile",
                    data:{ 'sellerid':sellerid },
                    dataType:"html",
                    success: function(data){

                        // Add a new tab
                        $("#tabs ul").append("<li id='tabindex_"+sellerid+"' ><a href='#sellertab_" + sellerid + "'>" +  sellername + "</a><a href='#' id='close_"+sellerid + "' class='ui-tabs-anchor remove' role='presentation' >x</a></li>");

                        // Add content to the newly added tab
                        $("#tabs").append("<div id='sellertab_"+sellerid+"' ></div>");
                        $('#sellertab_'+sellerid).html(data)

                        // Refresh tabs to add newley added tab
                        $("#tabs").tabs("refresh");

                    }
                });
                return false;
            }
        });

        $(document).on('click', '.remove', function(){

            // Get the tab number of pressed close button
            var sellerid = parseInt(this.id.split("_")[1]);

            // Remove the tabindex
            $('#tabindex_'+sellerid).remove();

            // Remove the tab content
            $('#sellertab_'+sellerid).remove();

            //Refresh the tabs
            $('#tabs').tabs("refresh");

        });

    });




$（文档）.ready（函数（）{
$（“#制表符”）.tabs（）；
$（文档）.on（'click'，'）。clickable_sellername'，function（）{
调试器；
var sellerid=parseInt（这个.id.split（“”“）[2]）；
var sellername=$（this.text（）；
if（$（'#tabindex'+sellerid）.length==0）{
$.ajax({
键入：“获取”，
url:“/myadmin/loadprofile”，
数据：{'sellerid'：sellerid}，
数据类型：“html”，
成功：功能（数据）{
//添加新选项卡
$（“#tabs ul”）.append（）；
//将内容添加到新添加的选项卡
$（“#制表符”）。追加（“”）；
$（'#sellertab.'+sellerid）.html（数据）
//刷新选项卡以添加newley added选项卡
$（“选项卡”）.tabs（“刷新”）；
}
});
返回false；
}
});
$（文档）。在（'单击'，'删除'，函数（）上）{
//获取按下的关闭按钮的标签号
var sellerid=parseInt（this.id.split（“”）[1]）；
//删除选项卡索引
$（'#tabindex'+sellerid）.remove（）；
//删除选项卡内容
$（'#sellertab'+sellerid）.remove（）；
//刷新选项卡
$（'#制表符'）。制表符（“刷新”）；
});
});

为“list”元素返回非零值，即使在删除它使用jquery.remove（）从DOM中删除，而对于“div”元素使用.remove（）删除div后，上面的表达式返回零。因此，我使用“div”元素进行检查

if($('#sellertab_'+sellerid).length == 0)

而不是

if($('#tabindex_'+sellerid).length == 0)

请发布您的代码-这样我们就更容易理解您在做什么。另外，根据您的描述，听起来您应该使用委托事件处理程序。请添加您的

html

结构。。。

if($('#tabindex_'+sellerid).length == 0)