trying to get xpath/css for following html - css

Question

I'm trying to create a dynamic xpath or css locator to locate, edit and delete images that are first column of matrix table that contains account information. Each account is distinct by email id, such as johng#teat.com in following html code.
What I'm looking for is how to write xpath/css locator that allows us to click on edit and delete icon/link based on known account email id.
<td nowrap="nowrap"><img src="sourcelocation/delete.png" alt="remove" style="border: 0px;"> <img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;"></td><td>John</td><td>Ghoper</td><td>johng#test.com</td><td></td><td style="white-space: normal">Reports Viewer</td><td style="white-space: normal">test.com</td><td>never</td>
<td nowrap="nowrap"><img src="sourcelocation/delete.png" alt="remove" style="border: 0px;"> <img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;"></td><td>Chris</td><td>Phela</td><td>kphela#test1.com</td><td></td><td style="white-space: normal">Reports Viewer</td><td style="white-space: normal">test1.com</td><td>never</td>
<td nowrap="nowrap"><img src="sourcelocation/delete.png" alt="remove" style="border: 0px;"> <img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;"></td><td>John</td><td>Ghoper</td><td>Pattyg#test2.com</td><td></td><td style="white-space: normal">Reports Viewer</td><td style="white-space: normal">test2.com</td><td>never</td>

Answer 1

I slightly modified the xml to make it well-formed. Here is the sample on which my answer is based on.
<root>
<td nowrap="nowrap">
<a href="#" onclick="$('table.jsonTable').matrix('remove',528); return false;"
title="remove">
<img src="sourcelocation/delete.png" alt="remove" style="border: 0px;" />
</a>
<a href="#" onclick="return heClick(528);">
<img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;" />
</a>
</td>
<td>John</td>
<td>Ghoper</td>
<td>johng#test.com</td>
<td></td>
<td style="white-space: normal">Reports Viewer</td>
<td style="white-space: normal">test.com</td>
<td>never</td>
<td nowrap="nowrap">
<a href="#" onclick="$('table.jsonTable').matrix('remove',302); return false;"
title="remove">
<img src="sourcelocation/delete.png" alt="remove" style="border: 0px;" />
</a>
<a href="#" onclick="return heClick(302);">
<img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;" />
</a>
</td>
<td>Chris</td>
<td>Phela</td>
<td>kphela#test1.com</td>
<td></td>
<td style="white-space: normal">Reports Viewer</td>
<td style="white-space: normal">test1.com</td>
<td>never</td>
<td nowrap="nowrap">
<a href="#" onclick="$('table.jsonTable').matrix('remove',528); return false;"
title="remove">
<img src="sourcelocation/delete.png" alt="remove" style="border: 0px;" />
</a>
<a href="#" onclick="return heClick(890);">
<img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;" />
</a>
</td>
<td>John</td>
<td>Ghoper</td>
<td>Pattyg#test2.com</td>
<td></td>
Now to select delete link based on known email id you can write //td[text()='johng#test.com']/preceding-sibling::td/a[#title='remove']
To select edit icon based on known email id you can write //td[text()='johng#test.com']/preceding-sibling::td/a/img[contains(#alt,'edit')]
Hope this helps.