javascript - 如何添加和删除 div(输入)

Question

我正在尝试制作一个页面，您可以在其中填写我网站上用于新闻的类别。当然，在此页面上您应该能够添加和删除类别。现在的问题是......不知道如何。我没有 JS 只用 html 制作它应该是什么样子。

输出:http://prntscr.com/59x898 http://prntscr.com/59x8cx

我的 HTML:

    <div class="titles">
        <h4>Edit categories</h4>
    </div>
    <div class="portfolioContainer">
        <form class="form-theme col-md-12" action="#">
            <div class="row">
                <div class="form-group">

                    <!-- This is where the divs should be -->

                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <input type="submit" value="Save" class="btn btn-lg btn-primary">
                </div>
                <div class="col-md-1 addRemoveB">
                    <input type="button" onclick="" value="+" class="btn btn-lg btn-primary">
                </div>
                <div class="col-md-1 addRemoveB">
                    <input type="button" onclick="" value="-" class="btn btn-lg btn-primary">
                </div>
            </div>
        </form>

    </div>
    <!-- End Recent Post -->

这是 div 的样子:

<div class="col-md-6">
    <label>Categorie 1 </label>
    <input type="cat"  required="required" maxlength="30" class="form-control" name="cat" id="cat">
</div>

我的 CSS ......好吧，我们可以说它到处都是，超过 1000 行左右......

另外，是否可以在添加新输入时更改输入的标签、ID 和名称？例如cat-1 cat-2等等。

非常感谢!! <3

Answer 1

试试这个。我正在使用 jquery 添加 div 并删除它。如果你想要更多，请问我你的用例。我更改我的代码。

$(document).ready(function() {
  var i = 0;
  $("#plus").click(function() {
    i++;
    $("body").append("<div id='cat" + i + "'>hi " + i +"</div>")
  });
  $("#minus").click(function() {
    $("#cat" + i).remove();
    i--;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-6" id="div1">
  <label>Categorie 1</label>
  <input type="text" required="required" maxlength="30" class="form-control" name="cat" id="cat">
</div>
<input type="button" value="Plus" id="plus" />
<input type="button" value="Minuss" id="minus" />