How to delete a TAB and its Div and check if it is the last item?

Asked

Viewed 54 times

1

Follow the code of my attempt:

$(function() {

  //for que inicie o tabs e depois de um refresh em todos os tabs existentes.

  for (var i = 0; i <= 9; i++) {

    for (var j = 0; j <= 9; j++) {

      for (var k = 0; k <= 9; k++) {

        $("#tabs" + i + "" + j + "" + k + "0").tabs();
        $("#tabs" + i + "" + j + "" + k + "0").tabs("refresh");

      }


    }
  }

});

function funcaoExcluir() {
  alert("como faço isso");
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js'></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.js"></script>

<br> &nbsp
<button type='button' onclick='funcaoExcluir()'>
 excluir tab selecionada e seu conteudo
 </button>

</button>

<div id="inicio" class="col-md-12" style="margin-top: 20px; width: 112%; z-index: 1;">
  <div style="float:right; margin-right:200px;"><button class="btn btn-danger" onclick="removerDiv()">Remover <span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></div>
  <div id="tabs0000" class="col-md-12 ui-tabs ui-corner-all ui-widget ui-widget-content">
    <ul id="ul-tabs" role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
      <p>&nbsp;<small style="font-weight:normal; color: black; float:left;">&nbsp;&nbsp;Sistema(s)</small></p>
      <li id="li1100" role="tab" tabindex="-1" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" aria-controls="tabs1100" aria-labelledby="ui-id-1" aria-selected="false" aria-expanded="false"><a href="#tabs1100" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-1">sissisisisisi1</a></li>
      <li role="tab" tabindex="0" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" aria-controls="tabs2100" aria-labelledby="ui-id-4" aria-selected="true" aria-expanded="true"><a href="#tabs2100" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-4">sissisisisisi 200 </a></li>
    </ul>
    <div id="tabs1100" style="margin-left: -19px; display: none;" class="col-md-12 ui-tabs-panel ui-corner-bottom ui-widget-content ui-tabs ui-corner-all ui-widget" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="true">
      <p>&nbsp;<small style="font-weight:normal; float:left; color: black; margin-left:10px;">Camada(s)</small></p>
      <ul id="ul-tabs11" role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
        <li role="tab" tabindex="0" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" aria-controls="tabs1110" aria-labelledby="ui-id-2" aria-selected="true" aria-expanded="true"><a href="#tabs1110" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-2">ADMIN </a></li>
      </ul>
      <div id="tabs1110" style="margin-left: -19px;" class="col-md-12 ui-tabs-panel ui-corner-bottom ui-widget-content ui-tabs ui-corner-all ui-widget" aria-labelledby="ui-id-2" role="tabpanel" aria-hidden="false">
        <p>&nbsp;&nbsp;<small style="font-weight:normal; float:left; color: black; margin-left:10px;">Servidor(s)</small></p>
        <ul id="ul-tabs11" role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
          <li role="tab" tabindex="0" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" aria-controls="tabs1111" aria-labelledby="ui-id-3" aria-selected="true" aria-expanded="true"><a href="#tabs1111" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-3">Gdd2dMrwwAW1</a></li>
        </ul>
        <div id="tabs1111" style="margin-left: -19px;" class="col-md-12 ui-tabs-panel ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="false">
          <div class="col-md-12 divGrafico" id="grftabs1111" style="width: 100%;" data-highcharts-chart="0">
            <h1>grafico</h1>
          </div>
        </div>
      </div>
    </div>
    <div id="tabs2100" style="margin-left: -19px; margin-top: 10px;" class="col-md-12 ui-tabs-panel ui-corner-bottom ui-widget-content ui-tabs ui-corner-all ui-widget" aria-labelledby="ui-id-4" role="tabpanel" aria-hidden="false">
      <p>&nbsp;<small style="font-weight:normal; float:left; color: black; margin-left:10px;">Camada(s)</small></p>
      <ul id="ul-tabs12" role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
        <li role="tab" tabindex="0" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" aria-controls="tabs2110" aria-labelledby="ui-id-5" aria-selected="true" aria-expanded="true"><a href="#tabs2110" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-5">ADMIN  duhsdhsudus</a></li>
      </ul>
      <div id="tabs2110" style="margin-left: -19px;" class="col-md-12 ui-tabs-panel ui-corner-bottom ui-widget-content ui-tabs ui-corner-all ui-widget" aria-labelledby="ui-id-5" role="tabpanel" aria-hidden="false">
        <p>&nbsp;&nbsp;<small style="font-weight:normal; float:left; color: black; margin-left:10px;">Servidor(s)</small></p>
        <ul id="ul-tabs12" role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
          <li role="tab" tabindex="0" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" aria-controls="tabs2112" aria-labelledby="ui-id-6" aria-selected="true" aria-expanded="true"><a href="#tabs2112" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-6">GEOM22222BW20</a></li>
        </ul>
        <div id="tabs2112" style="margin-left: -19px;" class="col-md-12 ui-tabs-panel ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-6" role="tabpanel" aria-hidden="false">
          <div class="col-md-12 divGrafico" id="grftabs2112" style="width: 100%;" data-highcharts-chart="1">
            <h1>grafico2</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

When to do the click no botão delete need to delete all content that appears in the selected link, and delete the link tb itself, besides that I need to check when there are no more items or "links", ai do um alert("não há mais itens" );

javascript html jquery

1 answer

1


You can delete the li and the div with the id of the corresponding tab. After deletion, count the class .ui-tab. If it equals 0, means there are no more tabs.

Behold:

$(function() {

  //for que inicie o tabs e depois de um refresh em todos os tabs existentes.

  for (var i = 0; i <= 9; i++) {

    for (var j = 0; j <= 9; j++) {

      for (var k = 0; k <= 9; k++) {

        $("#tabs" + i + "" + j + "" + k + "0").tabs();
        $("#tabs" + i + "" + j + "" + k + "0").tabs("refresh");

      }


    }
  }

});

function funcaoExcluir() {
   var idtab = $("li.ui-tabs-active").attr("aria-controls");
   $("li.ui-tabs-active, div#"+idtab).remove();
   
   if($("li.ui-tab").length == 0){
      console.log("Não existem mais tabs");
   }
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js'></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.js"></script>

<br> &nbsp
<button type='button' onclick='funcaoExcluir()'>
 excluir tab selecionada e seu conteudo
 </button>

</button>

<div id="inicio" class="col-md-12" style="margin-top: 20px; width: 112%; z-index: 1;">
  <div style="float:right; margin-right:200px;"><button class="btn btn-danger" onclick="removerDiv()">Remover <span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></div>
  <div id="tabs0000" class="col-md-12 ui-tabs ui-corner-all ui-widget ui-widget-content">
    <ul id="ul-tabs" role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
      <p>&nbsp;<small style="font-weight:normal; color: black; float:left;">&nbsp;&nbsp;Sistema(s)</small></p>
      <li id="li1100" role="tab" tabindex="-1" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" aria-controls="tabs1100" aria-labelledby="ui-id-1" aria-selected="false" aria-expanded="false"><a href="#tabs1100" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-1">sissisisisisi1</a></li>
      <li role="tab" tabindex="0" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" aria-controls="tabs2100" aria-labelledby="ui-id-4" aria-selected="true" aria-expanded="true"><a href="#tabs2100" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-4">sissisisisisi 200 </a></li>
    </ul>
    <div id="tabs1100" style="margin-left: -19px; display: none;" class="col-md-12 ui-tabs-panel ui-corner-bottom ui-widget-content ui-tabs ui-corner-all ui-widget" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="true">
      <p>&nbsp;<small style="font-weight:normal; float:left; color: black; margin-left:10px;">Camada(s)</small></p>
      <ul id="ul-tabs11" role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
        <li role="tab" tabindex="0" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" aria-controls="tabs1110" aria-labelledby="ui-id-2" aria-selected="true" aria-expanded="true"><a href="#tabs1110" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-2">ADMIN </a></li>
      </ul>
      <div id="tabs1110" style="margin-left: -19px;" class="col-md-12 ui-tabs-panel ui-corner-bottom ui-widget-content ui-tabs ui-corner-all ui-widget" aria-labelledby="ui-id-2" role="tabpanel" aria-hidden="false">
        <p>&nbsp;&nbsp;<small style="font-weight:normal; float:left; color: black; margin-left:10px;">Servidor(s)</small></p>
        <ul id="ul-tabs11" role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
          <li role="tab" tabindex="0" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" aria-controls="tabs1111" aria-labelledby="ui-id-3" aria-selected="true" aria-expanded="true"><a href="#tabs1111" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-3">Gdd2dMrwwAW1</a></li>
        </ul>
        <div id="tabs1111" style="margin-left: -19px;" class="col-md-12 ui-tabs-panel ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="false">
          <div class="col-md-12 divGrafico" id="grftabs1111" style="width: 100%;" data-highcharts-chart="0">
            <h1>grafico</h1>
          </div>
        </div>
      </div>
    </div>
    <div id="tabs2100" style="margin-left: -19px; margin-top: 10px;" class="col-md-12 ui-tabs-panel ui-corner-bottom ui-widget-content ui-tabs ui-corner-all ui-widget" aria-labelledby="ui-id-4" role="tabpanel" aria-hidden="false">
      <p>&nbsp;<small style="font-weight:normal; float:left; color: black; margin-left:10px;">Camada(s)</small></p>
      <ul id="ul-tabs12" role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
        <li role="tab" tabindex="0" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" aria-controls="tabs2110" aria-labelledby="ui-id-5" aria-selected="true" aria-expanded="true"><a href="#tabs2110" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-5">ADMIN  duhsdhsudus</a></li>
      </ul>
      <div id="tabs2110" style="margin-left: -19px;" class="col-md-12 ui-tabs-panel ui-corner-bottom ui-widget-content ui-tabs ui-corner-all ui-widget" aria-labelledby="ui-id-5" role="tabpanel" aria-hidden="false">
        <p>&nbsp;&nbsp;<small style="font-weight:normal; float:left; color: black; margin-left:10px;">Servidor(s)</small></p>
        <ul id="ul-tabs12" role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
          <li role="tab" tabindex="0" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" aria-controls="tabs2112" aria-labelledby="ui-id-6" aria-selected="true" aria-expanded="true"><a href="#tabs2112" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-6">GEOM22222BW20</a></li>
        </ul>
        <div id="tabs2112" style="margin-left: -19px;" class="col-md-12 ui-tabs-panel ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-6" role="tabpanel" aria-hidden="false">
          <div class="col-md-12 divGrafico" id="grftabs2112" style="width: 100%;" data-highcharts-chart="1">
            <h1>grafico2</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.