javascript - JQuery 从 td 单元格中删除按钮？

Question

我有一个表，用户可以单击该表来解锁记录。我想删除解锁按钮并替换为文本。例如，一旦他们单击解锁按钮将被删除，并且文本将显示为“记录已解锁”。我不确定为什么我当前的代码不删除按钮。如果有人可以提供帮助，请告诉我。谢谢。

$('.unlockBtn').on('click',unlockRecord);

function unlockRecord(){
	var trID = $(this).parents("tr").prop('id');
	
	if(confirm("Are you sure you want to unlock this record?")){
		$.ajax({
			type: 'POST',
			url: 'Application.cfc?method=unlockRec',
			data: {'recID':trID},
		    dataType: 'json'
		}).done(function(obj){
			var numRecs = obj.RECORDCOUNT;
			
			if(obj.STATUS == 200){
				$('#' + trID).closest('.unlockBtn').remove();
			}else{
				alert('Error')
			}
		}).fail(function(jqXHR, textStatus, errorThrown){
	    		alert("Error: "+errorThrown);
		});
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>User Name</th>
      <th>Status</th>
      <th>Date</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr id="11">
      <td>Jack, Smith</td>
      <td>Active</td>
      <td>12/01/2017</td>
      <td>01:16 PM</td>
      <td class="unlockBtn" style="text-align: center;">
        <input name="unlock" id="unlock" value="Unlock" type="button">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您还想删除实际的单元格还是仅替换内容？我认为你想要做的是首先将点击事件放在按钮上而不是单元格上(例如 $('.unlockBtn .unlock').on('click',unlockRecord); 然后当您想用文本替换按钮时，您需要删除事件监听器并替换单元格内容

$('#' + trID)
    .find('input[type="button"]')
        .off()
        .parent('.unlockBtn')
        .html('Record is unlocked');

最后(也许这只是因为您发布了一个示例，但以防万一，如果这是一个表，其中显示的 html 行重复很多，您将需要将按钮 id 更改为每个/唯一的内容像对待表格行一样进行行以避免冲突