【发布时间】：2021-12-18 19:39:44
【问题描述】：
我正在制作一个 CV builder，我已经用 jQuery 制作了一个按钮来添加和删除一个表单，但是当我添加时，它只是下降了，所以我可以添加更多，但是第一个表单保留在那里，我无法删除第一个表单。
示例
你知道它是如何下降的，我需要一个按钮，这样我也可以删除第一个：
正如你在图片中看到的那样，我添加了一个表单，然后出现了一个表单，但是添加按钮应该会向下移动，因为我把它放在了 div 旁边。但如果有人愿意，我需要添加一个红色按钮来删除第一个表单。
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
});
})(this.jQuery);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="col-xl-12">
<div id="test1" class="dashboard-box">
<!-- Headline -->
<div class="headline">
<h3><i class="icon-material-outline-school"></i> Obrazovanje</h3>
</div>
<div class="content with-padding">
<div class="forma">
<div class="row">
<label class="control-label col-xl-12" for="ContactNo"></label>
<div class="col-xl-12">
<div class="input-group control-group after-add-more">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija[]" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<label>Zvanje</label>
<input name="cv_obrazovanje_zvanje[]" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak[]">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj[]">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox[]" type="checkbox" id="chekcbox">
<label for="chekcbox"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
</div>
</div>
<!-- Dugme za dodavanje -->
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button" style="padding-left: 15px;"><span class="button ripple-effect">Dodajte</span></button>
</div>
<!-- Dugme za dodavanje -->
<div class="copy hide" style="display: none;">
<div class="control-group input-group" style="margin-top:10px">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<laabel>Zvanje</label>
<input name="cv_obrazovanje_zvanje" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox" type="checkbox" id="chekcbox2">
<label for="chekcbox2"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><span class="button ripple-effect" style="background-color: #B31C1C;">Ukloni</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="col-xl-12">
<a href="#" class="button ripple-effect big margin-top-30">Snimite promene</a>
</div>
</div>【问题讨论】：
-
请标记您的 Bootstrap 版本。
-
由于额外的右括号和大括号，您有控制台错误。删除它们似乎可以解决主要问题。请查看How to Ask 并修改您的帖子以提出更具体的问题。
标签： javascript html jquery css twitter-bootstrap