CODEWITHSUNDEEP
javascriptjquery
espresso_coffee
espresso_coffee

Reputation: 6110

JQuery remove button from td cell?

I have table where user can click to unlock the record. I want to remove Unlock button and replace with the text. For example once they click unlock button will be removed and text will show up like 'Record is unlocked'. I'm not sure why my current code doesn't remove button. If anyone can help please let me know. Thank you.

$('.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>

Upvotes: 0

Views: 680

Answers (2)

Yuri
Yuri

Reputation: 2900

Just add back your ajax call and you will be done.

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

function unlockRecord(){
	var trID = $(this).parents("tr").prop('id');
	
	if(confirm("Are you sure you want to unlock this record?")){
		var cell = $(event.srcElement);
    
   $( cell ).replaceWith( "<div>Record Unlocked</div>" );
	}
}
<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>

Upvotes: 1

Dave Gillem
Dave Gillem

Reputation: 516

Also do you want to remove the actual cell or just replace the contents? I would think what you want to do is first place your click event on the button and not the cell (e.g. $('.unlockBtn .unlock').on('click',unlockRecord); then when you want to replace the button with text, you'd remove the event listener and replace the cell contents 

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

Finally (maybe this is just due to you posting an example, but just in case, if this is a table where the html row shown is duplicated a lot you'll want to change the button id to something that's unique per/row like you do with the table row to avoid conflict

Upvotes: 1

Related Questions