如何使用jquery删除按钮单击时附加的div?

Ajay • 5 年前 • 1843 次点击

我正在添加一些文本框和一个按钮,使用append方法在一个按钮上单击,这是完美的工作。但当我试图删除相同的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()

        });

    });

HTML格式

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

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/54568

1843 次点击

文章 [ 3 ] | 最新文章 5 年前

• 1 楼

Mamun 5 年前

.parents()

.家长() 和 .parent() 方法是相似的,只是后者只在DOM树上移动一个级别。也, $( "html" ).parent() 方法返回包含文档的集合,而 $( "html" ).parents()

自从单击元素( .btnRemove ) 的( div.row .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).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>

• 2 楼

Phong 5 年前

你可以用 .parents() 或 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>

• 3 楼

Anant Singh---Alive to Die 5 年前

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

登录后回复