尝试删除动态添加的现有选项卡

Question

在这里，我尝试将动态选项卡添加到现有选项卡中，但如果再次打开该链接或弹出窗口，我试图确保它不会重复选项卡，我当前的代码正在执行以下操作比如现在

这是我的 html 和 jquery 代码

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

现在我的html代码是：

<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>

上面的内容将保持原样，永远不会被更改和删除，新选项卡将由 jquery 代码创建，jquery 响应就像这样

{
    "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>"
}

但它不断添加新选项卡，而不是清除现有选项卡（如果有），这里可能出了什么问题

Answer 1

您似乎在添加新选项卡之前删除了“addedDynamic”类的选项卡。但是，清除成功回调之外的所有动态选项卡，然后添加新选项卡可能会更有效。尝试像这样修改你的代码：

function loadbtns(dataAttributes) {
  // Clear all existing dynamic tabs
  $('#tabs').find("li.addedDynamic").remove();

  $.ajax({
    url: "x.cfm?section=11",
    type: 'POST',
    data: dataAttributes,
    dataType: 'json', 
    
    success: function(response) {
      console.log(response);
      if (Object.keys(response).length > 0) {
        var tabTemplate = "<li><a class='addedDynamic' href='#{href}'>#{label}</a></li>";

        var id1 = "tabs-" + ($("#tabs li").length + 1);
        var li1 = $(tabTemplate.replace(/#\{href\}/g, "#" + id1).replace(/#\{label\}/g, response.title1));
        $("#tabs").find(".ui-tabs-nav").append(li1);
        $("#tabs").append("<div id='" + id1 + "'>" + response.msg1 + "\n" + response.label1 + "\n" + response.textData1 + "\n" + response.content1 + "</div>");

        var id2 = "tabs-" + ($("#tabs li").length + 2);
        var li2 = $(tabTemplate.replace(/#\{href\}/g, "#" + id2).replace(/#\{label\}/g, response.title2));
        $("#tabs").find(".ui-tabs-nav").append(li2);
        $("#tabs").append("<div id='" + id2 + "'>" + response.msg2 + "\n" + response.label2 + "\n" + response.textData2 + "\n" + response.content2 + "</div>");

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

此修改可确保您在添加新选项卡之前删除所有现有的动态选项卡，从而防止重复。