使用jQuery单击按钮时在div中删除一行

Question

如上图所示，单击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中。

但是，一旦单击该按钮，我便会停留在如何删除此特定行上，因为每个按钮都与其他按钮相同。有没有更好的方法来实现这一点？

Answer 1

您将需要一种方法来标识整个行，以便将每个条目包装在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>