GrantHenninger Posted May 10, 2011 Share Posted May 10, 2011 Hello, I'm very new to Ajax and am having a very hard time writing some code that will remove a list item. I've tried to put together something that I think should work, but it isn't and I'm not quite sure why. The code I have is... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>Test</title> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="/stylesheet.css" /> <script src="/jquery.js" type="text/javascript" language="javascript"></script> <script type="text/javascript"> function addItem() { var li = document.createElement("li"); li.innerHTML = '<input type="text" name="instruction[]" size="100" maxlength="2000" /><a onclick="removeItem()" class="button">-</a>'; document.getElementById('list').appendChild(li); } function removeItem() { $(this).parent().remove(); } </script> </head> <body> <form method="POST" action="save.php" enctype="multipart/form-data"> <ol id="list"> <li><input type="text" name="list[]" size="100" maxlength="2000" /><a onclick="removeItem()" class="button">-</a></li> </ol> <a onclick="addItem()" class="button">Add item</a> <input type="submit" name="save" value="Save!" /> </form> </body> </html> The function addItem() works just fine. I'm including it so you can get a full picture of what I'm doing. However, the function removeItem() doesn't seem to work at all. Any help you could offer in guiding me towards fixing this code would be greatly appreciated. Thanks! Quote Link to comment https://forums.phpfreaks.com/topic/236040-removing-from-a-list/ Share on other sites More sharing options...
Imaulle Posted May 11, 2011 Share Posted May 11, 2011 maybe try something like function removeItem() { $(this).parent('li').remove(); } your li don't have any ID so I think that may be part of the issue as well Quote Link to comment https://forums.phpfreaks.com/topic/236040-removing-from-a-list/#findComment-1213717 Share on other sites More sharing options...
GrantHenninger Posted May 11, 2011 Author Share Posted May 11, 2011 maybe try something like function removeItem() { $(this).parent('li').remove(); } your li don't have any ID so I think that may be part of the issue as well Adding 'li' to the parent() didn't help. Is there a way to add a different ID for each element I add to the DOM? Quote Link to comment https://forums.phpfreaks.com/topic/236040-removing-from-a-list/#findComment-1213813 Share on other sites More sharing options...
prestonwinfrey Posted May 12, 2011 Share Posted May 12, 2011 You cannot access this in removeItem without passing it as an argument. <a onclick="removeItem(this)" class="button"> function removeItem(obj) { $(obj).parent().remove(); } Quote Link to comment https://forums.phpfreaks.com/topic/236040-removing-from-a-list/#findComment-1214475 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.