trying to delete existing tabs which were dynamically added

Question

Here i am in a situtation where i am trying to add the dynamic tabs to the existing tabs but also if that link or popup is agai opened, i am trying to make sure it does not duplicate the tabs, my current code is doing as such as of now

Here is my html and my jquery code

function loadbtns(dataAttributes) {
  $.ajax({
    url: "x.cfm?section=11",
    type: 'POST',
    data: dataAttributes,
    dataType: 'json', 
    
    success: function(response) {
      console.log(response);
      if(Object.keys(response).length > 0) {

        $('#tabs').find("li.addedDynamic").each(function() {
          $(this).remove();
        });
        var tabTitle1 = response.title1; // replace with how you access your title in data
        var tabContent1 = response.msg1 + "\n" + response.label1 + "\n" + response.textData1 + "\n" + response.content1; // replace with how you access your content in data
        var tabTitle2 = response.title2;// replace with how you access your title in data
        var tabContent2 = response.msg2 + "\n" + response.label2 + "\n" + response.textData2 + "\n" + response.content2; // replace with how you access your content in data

        var tabTemplate = "<li><a class='addedDynamic' href='#{href}'>#{label}</a></li>";
        var id1 = "tabs-" + ( $("#tabs li").length + 1 );
        var id2 = "tabs-" + ( $("#tabs li").length + 2 );

        var li1 = $( tabTemplate.replace( /#\{href\}/g, "#" + id1 ).replace( /#\{label\}/g, tabTitle1 ) );
        var li2 = $( tabTemplate.replace( /#\{href\}/g, "#" + id2 ).replace( /#\{label\}/g, tabTitle2 ) );

        $("#tabs").find( ".ui-tabs-nav" ).append( li1 );
        $("#tabs").append( "<div id='" + id1 + "'>" + tabContent1 + "</div>" );

        $("#tabs").find( ".ui-tabs-nav" ).append( li2 );
        $("#tabs").append( "<div id='" + id2 + "'>" + tabContent2 + "</div>" );

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

now the html code i have is:

<div id="tabs">
            <ul>
                <li id="Tabsheet"><a href="#newMgrAprvlScreen" class="tName"></a></li>
                <li id="Tabcs"><a href="#commentsSectionData" class="cName"></a></li>
            </ul>
            <div id="Screen">
                <div class="modal_datatable">
                    <table class="table2 display" id="ModalTblData">
                    </table>
                    <table id="ModalTblData2" class="table2 display">
                    </table>
                </div>
            </div>
            <div id="SectionData"></div>
        </div>

the above will stay as is and will never be changed and deleted, the new tabs will be created by the jquery code and the jquery response is ike this

{
    "textData1": "<div><textarea required minlength=\"5\" name=\"adjustment1\" id=\"adjustment1\" class=\"textareaWidth width100\" cols=\"50\" wrap=\"Virtual\"></textarea></div>",
    "msg1": "<div id=\"divIDMsg_1\" style=\"text-align:center;display:none;\"> accepted and email sent successfully!</div>",
    "textData2": "<div><textarea required minlength=\"5\" name=\"adjustment2\" id=\"adjustment2\" class=\"textareaWidth width100\" cols=\"50\" wrap=\"Virtual\"></textarea></div>",
    "msg2": "<div id=\"divIDMsg_2\" style=\"text-align:center;display:none;\">request has been sent!</div>",
    "title2": "Request",
    "title1": "Accepted",
    "content2": "<div class=\"pad5 padleft0\"><input type=\"button\" data-reqAdj=\"Request\" data-accAdj=\"Accepted \" data-emailSend=\"Email with this request has been sent!\" data-accepted=\" accepted and email sent successfully!\" data-details=\"Please enter details.\" data-invalid=\"Error! Your input is invalid!\" class=\"ui-button ui-corner-all ui-widget openSection2\" onclick=\"submitRequest2(this)\" data-reviewstatus=\"R\" data-tmcardid=\"221\" data-weekid=\"02/24/24\" data-stype=\"REG\" data-stime=\"NuMDA=\" data-instance=\"Vf=\" data-minvalue=\"40\" data-email=\"ICAA=\" data-empname=\"MOsa\" data-wkend=\"02/24/24\" data-emplyid=\"76\" data-action=\"2\" data-approver=\"NO\" value=\"Request Adjustment\" name=\"adjusted\" id=\"adjusted\"></div>",
    "content1": "<div class=\"pad5 padleft0\"><input type=\"button\" data-reqAdj=\"Request\" data-accAdj=\"Accepted \" data-emailSend=\"Email with this  request has been sent!\" data-accepted=\" accepted and email sent successfully!\" data-details=\"Please enter details.\" data-invalid=\"Error! Your input is invalid!\" class=\"ui-button ui-corner-all ui-widget openSection\" onclick=\"submitRequest(this)\" data-reviewstatus=\"Y\" data-tmcardid=\"221\" data-weekid=\"02/24/24\" data-stype=\"REG\" data-stime=\"NDAuMDA=\" data-instance=\"TkE=\" data-minvalue=\"40\" data-email=\"RAgICAgICA=\" data-empname=\"MOsa\" data-wkend=\"02/24/24\" data-emplyid=\"7151\" data-action=\"1\" data-approver=\"NO\" value=\"Accepted\" name=\"accepted\" id=\"accepted\"></div>",
    "label2": "<div class=\"pad5\">Request</div>",
    "label1": "<div class=\"pad5\">Accepted </div>"
}

but it keeps on adding new tabs instead of clearing existing if any, what could be wrong here

Answer 1

If you want to further enhance this to prevent duplications even when the same content is loaded again, you can maintain a list of unique tab titles or IDs and check against this list before adding a new tab. Here's an updated version of your code with this modification:

var addedTabs = [];

function loadbtns(dataAttributes) {
  $.ajax({
    url: "x.cfm?section=11",
    type: 'POST',
    data: dataAttributes,
    dataType: 'json',

    success: function(response) {
      console.log(response);
      if (Object.keys(response).length > 0) {
        // Clear existing dynamic tabs and the addedTabs array
        $('#tabs').find("li.addedDynamic").each(function() {
          $(this).remove();
        });
        addedTabs = [];

        // Add new tabs
        addDynamicTab(response.title1, response.msg1, response.label1, response.textData1, response.content1);
        addDynamicTab(response.title2, response.msg2, response.label2, response.textData2, response.content2);

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

function addDynamicTab(tabTitle, msg, label, textData, content) {
  // Check if the tab title is not already added
  if (addedTabs.indexOf(tabTitle) === -1) {
    var tabTemplate = "<li><a class='addedDynamic' href='#{href}'>#{label}</a></li>";
    var id = "tabs-" + ($("#tabs li").length + 1);
    var li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label));

    $("#tabs").find(".ui-tabs-nav").append(li);
    $("#tabs").append("<div id='" + id + "'>" + msg + "\n" + label + "\n" + textData + "\n" + content + "</div>");

    // Add the tab title to the addedTabs array
    addedTabs.push(tabTitle);
  }
}

This modification ensures that existing dynamic tabs are removed along with clearing the addedTabs array. As a result, each time new content is loaded, it will replace the existing tabs and prevent duplications.