【发布时间】：2019-12-11 14:50:05
【问题描述】：
我正在开发旅游网站，我需要在管理部分设置引导选项卡。我已经完成了一些部分，例如动态创建选项卡选项。
我遇到的问题是当我按下删除按钮时它可以工作，但它会删除所有内容而不是只删除 仅选定的选项卡。请帮我解决这个问题。
代码如下：
$(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>【问题讨论】：
标签： jquery html twitter-bootstrap bootstrap-4