[英]How to remove an appended div on a button click?
I have seen lot of example here.But here am facing another problem that the event is not even detected (button in appended div).我在这里看到了很多例子。但是这里面临着另一个问题,甚至没有检测到事件(附加 div 中的按钮)。 Am adding some text-box and a button using append method on a button click which works perfectly.but when I am trying to remove the same div using a button click its not working.
我正在添加一些文本框和一个按钮,使用 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() }); });
<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>
use closest() instead of parent() , as you want to traverse to up-most parent, not the immediate one.使用最接近的()而不是parent() ,因为你想遍历最上面的父级,而不是直接的父级。
Check below working snippet:检查以下工作片段:
$(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>
Note:- Check below thread for better understanding of parent()
, parents()
and closest()
注意:- 检查下面的线程以更好地理解
parent()
、 parents()
和closest()
Difference between jQuery parent(), parents() and closest() functions jQuery parent()、parent() 和closest() 函数之间的区别
The
.parents()
and.parent()
methods are similar, except that the latter only travels a single level up the DOM tree..parents()
和.parent()
方法是相似的,除了后者只在 DOM 树上向上移动一层。 Also,$( "html" ).parent()
method returns a set containing document whereas$( "html" ).parents()
returns an empty set.此外,
$( "html" ).parent()
方法返回一个包含文档的集合,而$( "html" ).parents()
返回一个空集合。
Since the clicked element ( .btnRemove
) is not the direct children of ( div.row
) instead of .parent()
use .parents()
:由于被点击的元素 (
.btnRemove
)不是( div.row
) 而不是.parent()
的直接子元素, .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>
You can use .parents()
or closest()
to achieve it.您可以使用
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.