Question

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

问题是一旦创建了div，我就不知道如何关闭它（即通过“关闭”动作将其从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>

以下是工作示例的链接： jsfiddle

Answer 1

当然，请参阅this updated fiddle;

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

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

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

Answer 2

1）使用.on（）绑定动态创建的元素上的事件

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

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

＆＃13;

$(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();
  })
});

＆＃13;

<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>

＆＃13;

关闭动态创建的DIV

2 个答案: