[英]how to delete element when click on button only not on all div
how to delete element when press on delete button?按下删除按钮时如何删除元素? but what happened here when i press any where in div the div will delete
但是当我按下 div 中的任何位置时,这里发生了什么,div 将删除
i am trying to delete using button only我正在尝试仅使用按钮删除
<script>
function myexfun(mySelectID, selectedItem, myDIVId) {
var x = document.getElementById(mySelectID).value;
$('#parentcur').append('<div id="childcur" class="row mg-l-20 mg-t-40 mg-lg-t-0 "><div class="col-lg-3 mg-t-40 mg-lg-t-0"><label class="rdiobox rdiobox-primary"><input name="rdio" type="radio" checked="" id="rdcur"><span id="selectedItemcur" class="mg-l-20 mg-t-40">' + x + '</span></label></div><div class=" mg-t-40 mg-l-auto mg-lg-t-0"><button class="btn btn-danger btn-sm mg-r-20 mg-t-5 rm" type="button" value="Delete" id="bdd"onClick="delelm()" title="Delete Row"><span class="icon ion-trash-a"></span> Delete</button></div></div>');
// bd.style.display = "block";
}
</script>
<script>
function delelm() {
$(document).on("click", '#childcur', function() {
$(this).remove();
});
}
</script>
i tried alot but i can not delete it from button just click on div我尝试了很多但我无法从按钮中删除它只需单击 div
Your click event listener is attached to the entire div, which is why it deletes whenever you click anywhere inside the div.您的单击事件侦听器附加到整个 div,这就是为什么每当您单击 div 内的任何地方时它都会删除的原因。 Since you have
delelm()
, you can modify the code as below to confine the click to just the delete button alone.由于您有
delelm()
,您可以修改如下代码以将单击限制为仅删除按钮。
$('#parentcur').append('<div id="childcur" class="row mg-l-20 mg-t-40 mg-lg-t-0 "><div class="col-lg-3 mg-t-40 mg-lg-t-0"><label class="rdiobox rdiobox-primary"><input name="rdio" type="radio" checked="" id="rdcur"><span id="selectedItemcur" class="mg-l-20 mg-t-40">1</span></label></div><div class=" mg-t-40 mg-l-auto mg-lg-t-0"><button class="btn btn-danger btn-sm mg-r-20 mg-t-5 rm" type="button" value="Delete" id="bdd"onClick="delelm(this)" title="Delete Row"><span class="icon ion-trash-a"></span> Delete</button></div></div>'); function delelm(el) { $(el).closest('#childcur').remove(); }
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <div id="parentcur"></div>
Your problem is that you're targeting clicks on the #childcur
div and not it's children.您的问题是您的目标是点击
#childcur
div 而不是儿童。
Here's an example of how this could be done:下面是如何做到这一点的一个例子:
HTML: HTML:
<div id="container">
<div class="deletable">
<p>A</p>
<button class="do-delete">Delete</button>
</div>
<div class="deletable">
<p>B</p>
<button class="do-delete">Delete</button>
</div>
<div class="deletable">
<p>C</p>
<button class="do-delete">Delete</button>
</div>
</div>
JS: JS:
// target buttons within the divs we want to be deletable.
$('div.deletable > button.do-delete').on('click', function() {
// when the button is clicked, access the parent and remove it from the DOM.
$(this).parent().remove();
})
Here's a fiddle: https://jsfiddle.net/7aro46et/这是一个小提琴: https : //jsfiddle.net/7aro46et/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.