关闭动态创建 DIV

Question

所以我有一个部分可以添加颜色，我可以动态创建一个 div 的副本，每个动态 div 都有一个新的 ID。

问题是 div 创建后，我不知道如何关闭它（即通过 "close" 操作将其从 DOM 中删除）。我知道这是因为它是动态内容。您不能像静态内容那样绑定事件，它不会绑定到元素，因为它们在您绑定时不会出现。我只是不知道如何让它关闭。

我要关闭的 div 以 "Color" + 递增数字开头。我希望我能正确解释这一点，如有任何帮助，我们将不胜感激。谢谢

<div class="col-xs-12" style="max-width: 800px">
<div class="col-md-12">
        <h3>COLOR ROTATION</h3> 
    <!--Begin color rotation well-->
    <div id="color">
    <div class="well well-sm">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group"><a><span class="glyphicon glyphicon-remove-sign" aria-hidden="true" style="padding-right: 2px;"></span></a>
                    <label class="control-label">Color 1</label>
                    <input class="form-control" maxlength="100" placeholder="Enter Color" required="required" type="text" />
                </div>
            </div>
            <div class="col-md-6">
                <label class="control-label">DROPDOWNS REQUIRED?</label>
                <div class="form-inline">
                    <div class="radio">
                        <label>
                            <input name="optradio" type="radio" />Yes</label>
                    </div>
                    <div class="radio">
                        <label>
                            <input name="optradio" type="radio" />No</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!--End color rotation well-->
</div>  
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a id="addcolor">Add Color</a>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>

这是工作示例的 link： jsfiddle

Answer 1

当然，请参阅 this updated fiddle;

本质上，您想使用 .on() 将事件绑定到文档，例如：

    $(document).on('click', '.remove', function(e){
        $(this).closest('.color-wap').remove();
    });

我将 .color-wrap class 添加到 #color div 以避免通过克隆使用重复的 ID，并添加了 .remove class到删除按钮

Answer 2

1)使用 .on() 在动态创建的元素上绑定事件

2)jquery 选择器 ^ 可以帮助选择 id 为 color-number 的 div。

3).animate() 切换 div 的高度或 .remove 如果你想完全删除元素。

$(function() {
  var count = 0;
  $('#addcolor').click(function() {
    count++;
    var clonediv = $('#color');
    $(clonediv).clone().insertBefore('#color');
    $(clonediv).attr("id", "color" + count);
  });

  $(document).on("click", ".glyphicon-remove-sign", function() {
     $(this).closest("div[id^='color']").animate({"height":"toggle"});
     //$(this).closest("div[id^='color']").remove();
  })
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-xs-12" style="max-width: 800px">
  <div class="col-md-12" id="test">
    <h3>COLOR ROTATION</h3> 
    <!--Begin color rotation well-->
    <div id="color">
      <div class="well well-sm">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group"><a><span class="glyphicon glyphicon-remove-sign" aria-hidden="true" style="padding-right: 2px;"></span></a>
              <label class="control-label">Color 1</label>
              <input class="form-control" maxlength="100" placeholder="Enter Color" required="required" type="text" />
            </div>
          </div>
          <div class="col-md-6">
            <label class="control-label">DROPDOWNS REQUIRED?</label>
            <div class="form-inline">
              <div class="radio">
                <label>
                  <input name="optradio" type="radio" />Yes</label>
              </div>
              <div class="radio">
                <label>
                  <input name="optradio" type="radio" />No</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--End color rotation well-->
  </div>
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a id="addcolor">Add Color</a>
  <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>

关闭动态创建 DIV

Closing Dynamically created DIV

html

javascript

jquery

dynamic