关闭UL LI选项卡并移至上一个选项卡

Question

我真的需要你的帮助。我想要完成的是能够单击关闭按钮（x）并关闭选项卡，然后一旦关闭选项卡，我希望代码执行的操作是选择上一个选项卡（如果有）是任何）并显示其相关的标签内容。

如果UL中没有标签（LI）关闭，则只需完全隐藏UL。

＆＃13;

＆＃13;

function init_form() {

  //INITIALIZE TABS
  $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:first").addClass("active").show(); //Activate first tab
  $(".tab_content:first").show(); //Show first tab content

  //On Click Event
  $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
  });

  $('span.close').on('click', function() {

    alert("clicked")

    $(this).parent().remove();

    $(".tab_content").hide();

  });

}

＆＃13;

.close_wrapper {
  position: relative;
  display: inline-block;
}

.close:before {
  content: '✕';
  font-size: 7.5pt;
}

.close {
  position: absolute;
  top: -10px;
  right: 0;
  cursor: pointer;
  padding: 0px;
  margin-right: 3px;
}

＆＃13;

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

<div id="main" style="display: inline-block; width: 983px;">
  <ul class="tabs">
    <div class="close_wrapper">
      <li><a href="#tab1">XAL-2017-482336</a><span class="close"></span></li>
    </div>
    <div class="close_wrapper">
      <li><a href="#tab2">A-2017-00471</a><span class="close"></span></li>
    </div>
    <div class="close_wrapper">
      <li><a href="#tab3">A-2017-00123</a><span class="close"></span></li>
    </div>
    <div class="close_wrapper">
      <li><a href="#tab4">A-2017-00456</a><span class="close"></span></li>
    </div>
  </ul>

  <div class="tab_container">
    <div class="tab_wrapper">

      <!--BEGIN DIV TAB 1 -->
      <div id="tab1" class="tab_content"></div>
      <!--END DIV TAB 1 -->

      <!--BEGIN DIV TAB 2 -->
      <div id="tab2" class="tab_content"></div>
      <!--END DIV TAB 2 -->

      <!--BEGIN DIV TAB 3 -->
      <div id="tab3" class="tab_content"></div>
      <!--END DIV TAB 3 -->

      <!--BEGIN DIV TAB 4 -->
      <div id="tab4" class="tab_content"></div>
      <!--END DIV TAB 4 -->

    </div>
    <!-- END DIV main  -->

＆＃13;

＆＃13;

＆＃13;