galvin Posted July 25, 2012 Share Posted July 25, 2012 I have HTML code like below with an onclick event called "remove()" with a unique div ID # in it. onClick, ideally, the entire HTML would disappear (i.e. the entire DIV), but I can't figure out how to do that. So what I've been doing is changing display to none (to hide it) and also using string replace to change the name from "starters[]" to "xstarters[]" so that the hidden stuff doesn't get posted to the "starters" array. This is terribly hacky, so wondering if anyone can point me in the right direction for accomplishing this properly (i.e. more efficiently). Just need to understand the best way to remove a DIV using an onClick event that can pass the DIV's unique ID. <div id='50' class='player' style='display: block;'><a href='#' onclick='remove(50)' >X</a>Beck, John<input type='hidden' id='input' name='starters[]' value='50' /></div> Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/ Share on other sites More sharing options...
Arnsenal Posted July 25, 2012 Share Posted July 25, 2012 If you have Jquery linked in your document you can use this. <script src="../myRelative/js/directory/jquery1.7.js"></script> //link that make Jquery available to you browser. <script type="text/javascript"> $(".del").click(function(){ $(this).parent().remove(); }) </script> I changed your html to suit... You can easily change your all you <a> tags to have a class="del" by using the replace function of you text editor. <div id='50' class='player' style='display: block;'> <a class="del" href='#' >X</a> Beck, John <input type='hidden' id='input' name='starters[]' value='50' /> </div> Here is a working example... http://jsfiddle.net/42xkK/ Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/#findComment-1364323 Share on other sites More sharing options...
Adam Posted July 25, 2012 Share Posted July 25, 2012 .. If you're not using jQuery, you need to call removeChild on the parent node of the element you want to remove. For example, assume we have the following HTML: <div id="players"> <div id="player50"> John Smith </div> </div> (I've prefixed the ID with "player" by the way, because an ID is technically required to start with a letter.) Now we can remove it with the following code: var player = document.getElementById('player50'); player.parentNode.removeChild(player); That will completely remove the player element from the DOM tree. Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/#findComment-1364392 Share on other sites More sharing options...
galvin Posted July 26, 2012 Author Share Posted July 26, 2012 Thanks guys. Arnsenal, I'll probably do it your way since I am using Jquery, however it's not working. I have this link on my page for JQuery, should this include the stuff to make it work? I'll keep testing as it my be something stupid I'm just overlooking, but would like to confirm that this set of JQuery files is all I need... http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/#findComment-1364419 Share on other sites More sharing options...
galvin Posted July 26, 2012 Author Share Posted July 26, 2012 That JSFiddle site is pretty cool, by the way, thanks for sharing! Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/#findComment-1364420 Share on other sites More sharing options...
galvin Posted July 26, 2012 Author Share Posted July 26, 2012 I just made the code as simple as possible and it still won't work for me. It works in JSFiddle fine (http://jsfiddle.net/42xkK/19/), but not for me. Here is my code and the JQuery DOES link to the proper library. You can try it with the Google link also and it still doesn't work (http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js) Shouldn't this work? I am going nuts here What could I possibly be doing wrong? UPDATE: I changed "class='del'" to be "onclick='jQuery(this).parent().remove()';" and that works. But I'd still rather do it arnsenal's way, so if anyone can tell what I'm doing wrong with that method, please share <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="/jquery/jquery1.7.js"></script> <script type="text/javascript"> $(".del").click(function(){ $(this).parent().remove(); }) </script> </head> <body> <a href='#' class="del">XXXXXXXXXXXXXX</a> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/#findComment-1364452 Share on other sites More sharing options...
peipst9lker Posted July 26, 2012 Share Posted July 26, 2012 Try $(document).ready(function(){ $(".del").live('click', function(){ $(this).parent().remove(); }); }); Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/#findComment-1364506 Share on other sites More sharing options...
Arnsenal Posted July 26, 2012 Share Posted July 26, 2012 Yes, peipst9lker is right, it appears your script is running before the DOM's are finished loading, rendering it useless. Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/#findComment-1364573 Share on other sites More sharing options...
Adam Posted July 26, 2012 Share Posted July 26, 2012 Try $(document).ready(function(){ $(".del").live('click', function(){ $(this).parent().remove(); }); }); Drop the use of "live" though. It's awfully inefficient. You might also want to be more specific about the parent, given future changes to the mark-up could have unexpected results! Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/#findComment-1364574 Share on other sites More sharing options...
galvin Posted July 26, 2012 Author Share Posted July 26, 2012 Thanks everyone, it works now using this below.... $(document).ready(function(){ $(".del").live('click', function(){ $(this).parent().remove(); }); }); However, I tried dropping "live" per Adam's suggestion but it didn't work when I used this below (I'm guessing it's syntactically wrong)... $(document).ready(function(){ $(".del").click(function(){ $(this).parent().remove(); }); }); Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/#findComment-1364581 Share on other sites More sharing options...
Adam Posted July 26, 2012 Share Posted July 26, 2012 How is the HTML pulled into the page? Sounds like at DOM ready the elements don't exist still. ---- Worth reading if you want to understand why it's inefficient: live() is a work-around for binding events to elements that haven't been defined yet - e.g. elements that will be pulled in via AJAX later, but still need the event behaviours bound to them when they are. This is done by attaching all the 'live' events to the document object, and checking all of the selectors every time an event bubbles up. Given the events have to travel so far up the DOM tree, this also introduces issues with propagation and possibly noticeable delays before an event is triggered. So basically, seemingly unrelated events will be bubbling up and firing off these live event checks all over the place in an unexpected order. Things will quickly slow down with a lot of them, especially in older browsers. Don't get me wrong, in modern browsers the impact probably wouldn't be noticeable, but it's just being wasteful for no reason. jQuery also provides delegate() though, which allows you to attach these 'live events' to an element much further down in the tree, instead of the document root, that will always exist. This is much more efficient because events only have to bubble as far as the container element before the event is handled, and the event will always be relating to a child of the container element -- it's much more precise. All this said, live() and delegate() have now been deprecated as of version 1.7 and replaced with on(), which forces you to define live events in a delegate() style way. Just don't bind them on the document as that's all that live() does. i.e. these do virtually the same thing: $('#child').live('click', function() {}); $(document).on('click', '#child', function() {}); Bad! So do these, but this is the right way of doing it: $('#parent').delegate('#child', 'click', function() {}); $('#parent').on('click', '#child', function() {}); Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/#findComment-1364611 Share on other sites More sharing options...
galvin Posted July 26, 2012 Author Share Posted July 26, 2012 Thanks Adam. There is a jquery autocomplete input field on the page where people search for NFL players. When they pick one, it displays some HTML further down on the page with that players info (including the "X" to remove it). So I guess that confirms your suspicion that "Sounds like at DOM ready the elements don't exist still." I guess I'll try the "less bad" examples you included Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/#findComment-1364617 Share on other sites More sharing options...
Adam Posted July 26, 2012 Share Posted July 26, 2012 Ah, that explains it then. Yeah if you call on(), on the DIV or other element that wraps around the auto-complete content you shall be laughing. Quote Link to comment https://forums.phpfreaks.com/topic/266237-onclick-event-to-completely-remove-a-specific-div/#findComment-1364642 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.