![](/img/trans.png)
[英]How to delete a row in the table when I click on a button? Using Javascript
[英]Delete a row in div when click the button using jQuery
如上图所示,单击x
按钮时,我试图删除该行。
我创建了一个div <div id="records"> </div>
,它不断使用jQuery将内容附加到$("#records").prepend(new_record)
中。
我实现该行的方式是:
var new_record = username + " " + $("#client-name").val() + $("#reams").val()+ " "+ "<button id='btn-sm'> x </button>"
在这里,我只是将包括按钮的每个部分附加到变量new_record
。
但是,单击按钮后,我将停留在如何删除此特定行上,因为每个按钮都与其他按钮相同。 有没有更好的方法来实现这一目标?
您将需要一种识别整个行的方法,以便将每个条目包装在div或其他元素中。 然后,由于元素是动态添加的,因此您需要使用委托事件处理-感测父元素中的单击,然后检查真正的来源是否来自特定类型的子元素-jQuery很简单。 此代码段查找被单击按钮的父div并将其删除。
$('#records').on('click', 'button', function() {
$(this).parent('div').remove();
});
var username = "test"; var new_record = "<div>" + username + " " + $("#client-name").val() + $("#reams").val() + " " + "<button id='btn-sm'> x </button></div>"; $("#records").prepend(new_record); $("#records").prepend(new_record); $("#records").prepend(new_record); $('#records').on('click', 'button', function() { $(this).parent('div').remove(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="records"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.