problem: can't remove new rows in table
I want to be able to add and remove items (rows from a table). Right now i am able to add rows seemingly without any problem. And here is the thing I haven't been able to solve. When clicking on my image I can remove items that is created upon page load. But i can't remove items that I add after the page load, with the help of jQuery. Any thoughts on what is wrong with my code and why? My code
jQuery code:
- $(document).ready(function() {
- $('#addItem').click(function() {
- var new_category = $('input#newCategory').val();
- $("#myTable").last().append("<tr><td>"+new_category+"<img id='checkmark' src='cancel.png' /></td></tr>");
- });
- $('table td img').click(function(){
- $(this).parent().parent().remove();
- });
- });
Simple table:
- <table id="myTable">
- <tr><td>1 row</td></tr>
- <tr><td>2 row</td><td><img id='checkmark' src='remove.png' /></td></tr>
- </table>
- <input type="text" id="newCategory" value="ny kategori"/>
- <a href="#" id="addItem"> Add List Item </a>