Question

I have the following HTML:

<div class="result-row odd">
 <div class="domain-name">first-domain.com</div>
 <div class="domain-functions">
  <a onclick="deleteDomain(1)" href="javascript:void(0);">
   <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png">
  </a> 
  <a onclick="editDomain(1)" href="javascript:void(0);">
   <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png">
  </a>
 </div>
</div>

    <div class="result-row even">
 <div class="domain-name">second-domain.com</div>
 <div class="domain-functions">
  <a onclick="deleteDomain(2)" href="javascript:void(0);">
   <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png">
  </a> 
  <a onclick="editDomain(2)" href="javascript:void(0);">
   <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png">
  </a>
 </div>
</div>

I would like to replace the first-domain.com with an input field when clicking the edit button…

I’ve got this so far:

function editDomain() {
    $('.domain-name').html('<input class="inline" type="text"/><input class="inline" type="button" value="save"/>');
}

This changes all my titles – What is the best way to replace only the correct title?

Answer 1

First, switch your HTML to use classes for the links and remove the in-line event handlers.

<div class="result-row odd">
 <div class="domain-name">first-domain.com</div>
 <div class="domain-functions">
  <a class="deleteDomain" href="#delete1">
   <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png">
  </a> 
  <a class="editDomain" href="#edit1">
   <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png">
  </a>
 </div>
</div>

Then use jQuery event binding, making use of the .closest() method to isolate your .html() change to the associated field.

$(function(){
  $('.editDomain').click(function(){
    $(this).closest('.result_row').find('.domain-name').html('<input class="inline" type="text"/><input class="inline" type="button" value="save"/>');

    return false;
  });
  $('.deleteDomain').click(function(){
    return false;
  });
});