0

I am working on an HTML page where there are a list of items in a table and on clicking an item a new tab is generated showing the details of the item clicked. I am using jquery-ui tabs for dynamically creating tabs. I need to open a tab for an item only if a tab does not exist for that item. I use the below code to achieve this

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

I use tabs with unique id for each item. This code works when loading tab for the first time, the problem is I also have a X button to close the tab and on click f that button I remove the tab division from HTML DOM using jquery .remove() function. This way the tab gets removed but when I try to add the tab for a particular item after removing it once. Then the above code doesn't work it shows that tab already exist. And new tab is not getting created. How can I remove an element completely from HTML DOM so that the above code works for recreating tabs after removing it once. Thanks in advance for any help

<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");

        });

    });
2
  • 1
    Please post your code - it's much easier for us to understand what you're doing from that. Also, from your description it sounds like you should be using delegated event handlers. Sep 30, 2015 at 8:35
  • please add your html structure...
    – Kiyarash
    Sep 30, 2015 at 8:38

1 Answer 1

0
$('#selector').length 

returns a non zero value for an "list" element even after removing the it from the DOM using jquery .remove() whereas in case of a "div" element it returns zero for the above expression after removing the div using .remove(). So I used "div" element for checking purpose ie now i use

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

instead of

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.