按删除按钮时如何删除元素? 但是当我按div中的任何位置时,这里会发生什么
我正在尝试仅使用按钮删除
<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>
我尝试了很多,但是我不能从按钮中删除它,只需单击div
答案 0 :(得分:0)
您的click事件侦听器将附加到整个div,这就是为什么您在div内的任何位置单击时都会将其删除。由于您拥有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>
答案 1 :(得分:0)
您的问题是您定位的是#childcur
div上的点击,而不是孩子。
下面是如何完成此操作的示例:
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:
// 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();
})
这是一个小提琴:https://jsfiddle.net/7aro46et/