maddoghalo
New Member
I have a simple form, that allows someone to add/remove extra telephone numbers. For some reason, I cannot see the error in my Javascript. The user can add new numbers as list items without any issues--each list item has a button to remove the list item. If the user clicks on the first list items remove button, the item is removed. None of the list items that were added with JS will be removed from the page.This seems so simple, but I'm stumped. I've spent the last two hours trying to solve this with many searches in stackoverflow and on google. I know I will feel silly when it's resolved, but I could use some help with this. HTML\[code\]<ul class="telRow"> <li id="telid_1234"> ONE <button class="telRowRemove">-</button> </li></ul><div> <button class="telRowAdd">+</button></div><div id="errors">No errors</div><div class="emptyTel" style="display: none;"><input type="text" name="tel_no[]" /><button class="telRowRemove">-</button> </div>\[/code\]JS\[code\]$(document).ready(function(){ $('.telRowAdd').on('click', function() { var Container = $('ul.telRow'); var newrow = '<li>ONE <button class="telRowRemove">-</button></li>'; Container.append(newrow); $('#errors').text('Added'); }); $('.telRowRemove').click(function() { $(this).parent('li').remove(); $('#errors').text('Removed'); });});\[/code\]The remove button has a class of .telRowRemove, so in theory clicking on the button would trigger $('.telRowRemove').click, but it only does this for the original list item on the page, none of the rest of the list items. I have a sample setup on JS Bin here http://jsbin.com/omanij/1/edit