工作演示

Question

我想添加make一个应用程序，用户可以根据需要添加任意数量的字段集。当用户点击＆＃34;添加＆＃34;时，它会添加第二个带有package2的字段集。如果用户单击相应的＆＃34; delete＆＃34;，它将删除相应的字段集。应用程序应始终至少有一个字段集，这意味着如果Web上只有一个字段集，则无法删除它。我在这里完成了一些代码，有人可以帮我弄清楚它有什么问题吗？谢谢。 https://jsfiddle.net/cowling/2qfy6cct/

HTML code：

<form>  
    <div id="fieldwrapper">
      <fieldset class="col-md-9 col-md-offset-1 bottom20" id="addField">
        <div class="col-md-11">

            <label class="col-md-1 label-right left-0">package1*</label>
            <div class=" col-md-11 input-div " id="tracking">
                <input type="text" class="col-md-11 input-div form-control required" >
            </div>
            <div id="errors" class="txt-left"></div>


            <label class="col-md-1 label-right">comment</label>
            <div class="col-md-11 input-div">
                <input class="form-control" type="text" >      
            </div>

        </div>

        <div class="col-md-1">
          <button type="button" class="btn btn-danger remove top25" >delete</button>
        </div>

      </fieldset>
    </div>




    <div class="form-group col-md-9 col-md-offset-1">
      <div class="col-md-6">
        <input type="button" class="btn btn-success btn-block" id="add" value="add" >
      </div>

      <div class="col-md-6">
        <button class="btn btn-primary btn-block" type="submit">finish</button>
      </div>
    </div>

</form>

JS代码：

$(document).ready(function(){


   // $('.remove').click(function(){
   //      $(this).parents("fieldset").remove();
   //  });

    $("#add").click(function() {    
      $('.remove').click(function(){
        $(this).parents("fieldset").remove();
      });    
         var intId = $("#fieldwrapper fieldset").length + 1;
        var html = '<fieldset class="col-md-9 col-md-offset-1 bottom20" id="addField" >';
        html += '<div class="col-md-11" >';
        html += '<label class="col-md-1 label-right left-0">package' + intId + '*</label>';
        html += '<div class=" col-md-11 input-div" id="tracking">';
        html += '<input type="text" class="col-md-11 input-div form-control required" >';
        html += '</div>';
        html += '<div id="errors" class="txt-left"></div>';
        html += '<label class="col-md-1 label-right">comment</label>';
        html += '<div class="col-md-11 input-div">';
        html += '<input class="form-control" type="text" >';
        html += '</div></div>';

        html += '<div class="col-md-1">';
        html += '<button type="button" class="btn btn-danger remove top25" >delete</button>';
        html += '</div>';
        html += '</fieldset>';


        $("#fieldwrapper").append(html);
    });
});

Answer 1

问题是您在处理动态创建的元素上的事件时需要使用事件委派。 Event Delegation

$(document).on("click", ".remove", function(){
  if ($("fieldset", "#fieldwrapper").length > 1) {
    $(this).closest("fieldset").remove();
  }
});

工作演示

https://jsfiddle.net/2qfy6cct/2/

JQuery删除父节点

1 个答案:

工作演示