javascript - 如何在单击按钮时删除附加的 div？

Question

我在这里看到了很多例子。但是这里面临着另一个问题，即事件甚至没有被检测到(附加 div 中的按钮)。 我在按钮单击上使用追加方法添加了一些文本框和一个按钮，效果非常好。但是当我尝试使用按钮删除相同的 div 时，单击它不起作用。

$(document).ready(function() {

  $("#add").click(function() {

    $("#mydiv").append($("<div class='row' id='row'> <div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vname[]'class='form-control' placeholder='Vazhipad Name' /></div></div></div><div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vprize[]'class='form-control' placeholder='Vazhipad Prize' /> </div></div> </div><div class='form-group'><div class='col-md-10'><button type='button' id='btnRemove' class='btn btn-primary btnRemove'>-</button></div></div></div></div>"))
  });
  $('body').on('click', '.btnRemove', function() {
    $(this).parent('div.row').remove()
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv" id="mydiv">
  <div class="form-group">
    <div class="col-md-10">
      <select name="templeid" id="tid1" class="form-control">
        <option>-Select Temple-</option>
        <option value="temp_id">A templename</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <div class="col-md-10">
          <input type="text" name="vname[]" class="form-control" placeholder="Vazhipad Name" />
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="form-group">
        <div class="col-md-10">
          <input type="text" name="vprize[]" class="form-control" placeholder="Vazhipad Prize" />
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="form-group">
        <div class="col-md-10">
          <button type="button" id="add" class="btn btn-primary">+</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

使用closest()而不是parent() ，因为您想要遍历到最上面的父级，而不是直接的父级。

检查下面的工作片段:

$(document).ready(function () {
  $("#add").click(function () {
    $("#mydiv").append($("<div class='row' id='row'> <div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vname[]'class='form-control' placeholder='Vazhipad Name' /></div></div></div><div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vprize[]'class='form-control' placeholder='Vazhipad Prize' /> </div></div> </div><div class='form-group'><div class='col-md-10'><button type='button' id='btnRemove' class='btn btn-primary btnRemove'>-</button></div></div></div></div>"))
    });
    $('body').on('click', '.btnRemove', function () {
      $(this).closest('div.row').remove()
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="mydiv"></div>

注意:- 检查下面的线程以更好地理解 parent()、parents() 和 closest()

Difference between jQuery parent(), parents() and closest() functions