Question

我使用jQuery添加和删除文本框字段，并且添加功能正常，但删除功能导致问题。添加后无法删除字段。我试图检测它背后的错误但找不到任何错误。

我需要新鲜的眼睛来帮助我发现我哪里出错了。以下是代码：

＆＃13;

<script>

$(document).ready(function() {

  // Variables
  var hello = '<div id="p"><div class="row"><div id="p" class="col-md-4"><input type="text" name="make" class="form-control"></div><div class="col-md-3"><input type="text" name="make" class="form-control"></div><div class="col-md-2"><input type="text" name="model" class="form-control"></div><div class="col-md-2"><input type="text" name ="serial" class="form-control"></div><div class="col-md-1"><span id="remove" class="btn btn-xs btn-danger"><b> - </b></span></div><br><br></div></div>';
	
  // Add rows to the form
  $("#add").click(function() {
    $("#fields").append(hello);	
  });
	
  // Remove rows from the form
  $("#fields").on('click', '#remove', function() {
    $(this).parent('#p').remove();	
  });
			
  // Populate values from the first row
	
});

</script>

＆＃13;

<div class="container">
    <div class="row" style="padding-top: 7%;" >
        <div class="col-md-offset-1 col-sm-offset-2 col-md-10 col-sm-8">
            <div class="card">
                <div class="card-body">
                    <form class="form" role="form">
                        <div class="form-group floating-label">
                            <input readonly type="text" class="form-control input-lg" id="large4" >
                            <label for="large4">Request Title</label>
                        </div>
                        <div class="form-group floating-label">
                            <input readonly type="text" class="form-control input-lg" id="default4">
                            <label for="default4">Objective of Request</label>
                        </div>
                        <div class="form-group floating-label">
                            <br>
                            <div class="row">
                                <div class="col-md-4 text-center">
                                    <b>Items</b>
                                </div>
                                <div class="col-md-3 text-center">
                                    <b>Specs (if any)</b>
                                </div>
                                <div class="col-md-2 text-center">
                                    <b>Quantity</b>
                                </div>
                                <div class="col-md-2 text-center">
                                    <b>Amount</b>
                                </div>
                                <div class="col-md-1">
                                </div>
                            </div>
                        </div>
                        <div id="fields" class="form-group floating-label">
                            <div class="row">
                                <div class="col-md-4">
                                    <input type="text" name="make" class="form-control">
                                </div>
                                <div class="col-md-3">
                                    <input type="text" name="make" class="form-control">
                                </div>
                                <div class="col-md-2">
                                    <input type="text" name="model" class="form-control">
                                </div>
                                <div class="col-md-2">
                                    <input type="text" name ="serial" class="form-control">
                                </div>
                                <div class="col-md-1">
                                    <a href="#" id="add" class="btn btn-sm btn-success"><b> + </b></a>
                                </div>
                                <br><br>
                            </div>
                        </div>
                        <div class="card-actionbar">
                            <div class="card-actionbar-row">
                                <br><br>
                                <button type="submit" class="btn btn-flat btn-primary ink-reaction">SUBMIT</button>
                            </div>
                        </div><!--end .card-actionbar -->
                    </form>
                </div><!--end .card-body -->
            </div><!--end .card -->
        </div><!--end .col -->
    </div><!--end .row -->
</div>

<!-- END SIZES -->

＆＃13;

Answer 1

将您的#remove元素更改为<a href="#" id="remove" class="btn btn-xs btn-danger"><b> - </b></a>。

并将删除功能更改为以下内容。确保使用最近而不是父。

$("#fields").on('click', '#remove', function(){
        $(this).closest('#p').remove(); 
});

如果您有任何问题，请与我们联系。

Answer 2

问题在于：

$(this).parent('#p').remove();

来自jQuery docs：

... parent（）方法遍历每个元素的立即父级...

您应该使用.closest()方法。来自jQuery docs：

对于集合中的每个元素，获取与之匹配的第一个元素选择器通过测试元素本身和遍历它 DOM树中的祖先。

所以你的代码应该是这样的：

$(this).closest('#p').remove();

再说一遍。我认为对于可能具有相同id的重复的元素使用id是不是最好的做法。这可能会导致问题。

Answer 3

https://jsfiddle.net/1aurfeox/1/

您不需要使用字符串创建变量。您可以克隆第一个现有元素，然后对其进行处理以创建可移动行。

  $(document).ready(function() {
    //Variables
    var hello = $("div#fields .row").clone();
    hello.find("#add").parent().html('<a href="#" id="remove" class="btn btn-sm btn-danger"><b> - </b></a>');
    //Add rows to the form
    $("#add").click(function() {
      $("#fields").append(hello.clone());
      $("#remove").click(function() {
        $(this).closest(".row").remove();
      });
    });
  });

使用JQuery删除文本字段

3 个答案: