Help with jquery selecting correct element

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;
  });
});

Answer 2

applying the change to the elements as you have them requires only the following. Not IE compatible but can be made so. You need the sibling of the element that was clicked. Alternately you can (and should probably) bind the click event after the page loads. Look up unobtrusive JavaScript to get some suggestions on why this is better.

<a onclick="editDomain()" href="javascript:void(0);">
 <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png">
</a>

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

Answer 3

First I suggest you add some changes to your html code

 <div class="result-row odd" id="0">
 <div class="domain-name">first-domain.com</div>
 <div class="domain-functions">
  <a id="delete">
   <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png">
  </a> 
  <a id="edit">
   <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png">
  </a>
 </div>
</div>

<div class="result-row even" id="1">
 <div class="domain-name">second-domain.com</div>
 <div class="domain-functions">
  <a id="delete">
   <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png">
  </a> 
  <a id="edit">
   <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png">
  </a>
 </div>
</div>

You can add a click method to each div you got like this

$('div[class^=result-row]').find('div a[id="delete"]').click(function(){
        $(this).closest().remove();
});

You can do the same with the edit function, add a click to each div id="edit"

$('div[class^=result-row]').find('div a[id="edit"]').click(function(){
        $(this).closest().find('.domain-name').html("yourCustomHTMLHere");
});