只需要在引导选项卡中添加“删除”按钮并删除选定的选项卡。

Question

我是在旅游网站工作，我需要引导选项卡在管理部分。我已经完成了一些部分，比如动态创建选项卡选项。

当我按下“删除”按钮时，会出现问题，但它会删除所有内容，而不是只删除选定的选项卡。请帮我解决这个问题.

以下是密码：

​

$(document).ready(function(e) {

  
  //Remove rows from the form
  $('#itinerary_tab_content').on('click', '#deletetab', function(e){

    $(this).closest('#itinerary_tab_nav').remove();
    $(this).closest('#itinerary_tab_content').remove();

  });
});

.btn-remove{
  float: right;
  position: relative;
  top: -31px;
  right: -31px;
  border-radius: 0 5px 0px 0px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="tab-regular ">
                <ul class="nav nav-tabs" id="itinerary_tab_nav" role="tablist">
                    <li class="nav-item " title="Itinerary Day - 1">
                        <a class="nav-link active py-2 px-3" id="tab-outline-1" data-toggle="tab" href="#outline-1" role="tab" aria-controls="outline-1" aria-selected="true">
                          Day#1
                        </a>
                    </li>
                    <li class="nav-item " title="Itinerary Day - 2">
                        <a class="nav-link py-2 px-3" id="tab-outline-2" data-toggle="tab" href="#outline-2" role="tab" aria-controls="outline-2" aria-selected="true">
                          Day#2
                        </a>
                    </li>
                    <li class="nav-item " title="Itinerary Day - 3">
                        <a class="nav-link  py-2 px-3" id="tab-outline-3" data-toggle="tab" href="#outline-3" role="tab" aria-controls="outline-3" aria-selected="true">
                          Day#3
                        </a>
                    </li>
                </ul>
                <div class="tab-content container" id="itinerary_tab_content">
                
                    <div class="tab-pane active fade show" id="outline-1" role="tabpanel" aria-labelledby="tab-outline-1">
                      <div class="form-group row p-0 m-0"><div class="col-md-12 p-0 m-0 pt-5 pr-4"><button class="btn btn-danger btn-sm btn-remove" id="deletetab" type="button"><i class="fas fa-times">X</i></button></div></div>
                    Form - 1  
                    </div>
                    
                    <div class="tab-pane fade show" id="outline-2" role="tabpanel" aria-labelledby="tab-outline-2">
                      <div class="form-group row p-0 m-0"><div class="col-md-12 p-0 m-0 pt-5 pr-4"><button class="btn btn-danger btn-sm btn-remove" id="deletetab" type="button"><i class="fas fa-times">X</i></button></div></div>
                    Form - 2  
                    </div>
                    
                    <div class="tab-pane fade show" id="outline-3" role="tabpanel" aria-labelledby="tab-outline-3">
                      <div class="form-group row p-0 m-0"><div class="col-md-12 p-0 m-0 pt-5 pr-4"><button class="btn btn-danger btn-sm btn-remove" id="deletetab" type="button"><i class="fas fa-times">X</i></button></div></div>
                    Form - 3 
                    </div>
                </div>
            </div>

​

Answer 1

在jquery中使用.parentsUntil('#itinerary_tab_content')，它将用于动态查询

$(this).parentsUntil('#itinerary_tab_content').remove();
$('#itinerary_tab_nav > li > a.active').remove();

​

$(document).ready(function(e) {

  
  //Remove rows from the form
  $('#itinerary_tab_content').on('click', '#deletetab', function(e){

    //$(this).closest('#itinerary_tab_nav').remove();
   // $(this).closest('#itinerary_tab_content').remove();

 $(this).parentsUntil('#itinerary_tab_content').remove();
 $('#itinerary_tab_nav > li > a.active').remove();
  });
});

.btn-remove{
  float: right;
  position: relative;
  top: -31px;
  right: -31px;
  border-radius: 0 5px 0px 0px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="tab-regular ">
                <ul class="nav nav-tabs" id="itinerary_tab_nav" role="tablist">
                    <li class="nav-item " title="Itinerary Day - 1">
                        <a class="nav-link active py-2 px-3" id="tab-outline-1" data-toggle="tab" href="#outline-1" role="tab" aria-controls="outline-1" aria-selected="true">
                          Day#1
                        </a>
                    </li>
                    <li class="nav-item " title="Itinerary Day - 2">
                        <a class="nav-link py-2 px-3" id="tab-outline-2" data-toggle="tab" href="#outline-2" role="tab" aria-controls="outline-2" aria-selected="true">
                          Day#2
                        </a>
                    </li>
                    <li class="nav-item " title="Itinerary Day - 3">
                        <a class="nav-link  py-2 px-3" id="tab-outline-3" data-toggle="tab" href="#outline-3" role="tab" aria-controls="outline-3" aria-selected="true">
                          Day#3
                        </a>
                    </li>
                </ul>
                <div class="tab-content container" id="itinerary_tab_content">
                
                    <div class="tab-pane active fade show" id="outline-1" role="tabpanel" aria-labelledby="tab-outline-1">
                      <div class="form-group row p-0 m-0">
                      <div class="col-md-12 p-0 m-0 pt-5 pr-4"><button class="btn btn-danger btn-sm btn-remove" id="deletetab" type="button"><i class="fas fa-times">X</i></button></div></div>
                    Form - 1  
                    </div>
                    
                    <div class="tab-pane fade show" id="outline-2" role="tabpanel" aria-labelledby="tab-outline-2">
                      <div class="form-group row p-0 m-0"><div class="col-md-12 p-0 m-0 pt-5 pr-4"><button class="btn btn-danger btn-sm btn-remove" id="deletetab" type="button"><i class="fas fa-times">X</i></button></div></div>
                    Form - 2  
                    </div>
                    
                    <div class="tab-pane fade show" id="outline-3" role="tabpanel" aria-labelledby="tab-outline-3">
                      <div class="form-group row p-0 m-0"><div class="col-md-12 p-0 m-0 pt-5 pr-4"><button class="btn btn-danger btn-sm btn-remove" id="deletetab" type="button"><i class="fas fa-times">X</i></button></div></div>
                    Form - 3 
                    </div>
                </div>
            </div>

​