onClick event to completely remove a specific DIV?

galvin · 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>

Arnsenal · 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/

Adam · 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.

galvin · 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

galvin · July 26, 2012

That JSFiddle site is pretty cool, by the way, thanks for sharing!

galvin · 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>

peipst9lker · July 26, 2012

Try

$(document).ready(function(){
$(".del").live('click', function(){
	$(this).parent().remove();     
});
});

Arnsenal · July 26, 2012

Yes, peipst9lker is right, it appears your script is running before the DOM's are finished loading, rendering it useless.

Adam · 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!

galvin · 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();     
});
});

Adam · 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() {});

galvin · 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

Adam · 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.

Sign In

onClick event to completely remove a specific DIV?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information