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

时间:2014-11-25 09:16:00

标签: javascript html css twitter-bootstrap twig

我试图建立一个页面,您可以在其中填写我网站上用于新闻的类别。在此页面上,您应该能够添加和删除类别。现在的问题是......不知道怎么做。我没有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等等。

非常感谢! &LT; 3

1 个答案:

答案 0 :(得分:0)

试试这个。我正在使用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" />