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

Question

我看过很多例子 here.But 这里面临另一个问题，即事件甚至没有被检测到（附加的按钮 div）。我正在添加一些 text-box 和一个按钮，在单击按钮时使用附加方法，当我尝试使用单击按钮删除相同的 div 时，该方法有效 perfectly.but。

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

.parents()

The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ).parents() returns an empty set.

因为点击的元素 (.btnRemove) 不是 (div.row) 的直接子元素 .parent() 使用 .parents():

$(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).parents('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>

Answer 2

使用 closest() instead of 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()

jQuery parent()、parents() 和 closest() 函数之间的区别

Answer 3

你可以用.parents() or closest()来实现。

 $("#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).parents('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>
                           @foreach (var a in ViewBag.namelist)
                           {
                          <option value="@a.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>

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

How to remove an appended div on a button click?

javascript

jquery

asp.net-mvc-4