Question: I have the function:

```
<script type="text/javascript">
    $(function() {
        $('#subbutton').click(function() {
            $('#subbutton').hide();

        });
    });
</script>

```

It simply makes this button hide when clicked:

```
 <a id="subbutton" class="button" href="javascript:TINY.box.show({url: 'follow',width:600,height:170,openjs:'initPopupLogin',opacity:30})"><span>Button</span></a>

```

Now, if i try to use the identical function, but with a link later on the page, it doesnt work (i have erased the original button at this point) Here is the code:

```
<div id="subbutton">
        <a href="#"><span>Button</span></a>
</div>

```

I have tried putting the id in the anchor and in the span, nothing seems to be working for this link. Any idea why this isn't working? (I have deleted the original button so that this second button is a unique id on the page)

Answer: 
`.hide` doesn't remove the element from the page so your selector will still be matching on the first element. You need to use `.remove` to remove the first element from the DOM so the second selector can work. 

Also, little jQuery optimization. The nested call to $('#subbutton') is not needed. At best, it is harder to maintain, at worst, it could cause performance issues if you put this in a large loop. This is better.

```
$(function() {
    $('#subbutton').click(function() {
        $(this).remove();

    });
});

```
Change your javascript to:

```
 $(function() {
        $('#subbutton').live("click",function() {
          $(this).hide();
        });
    });​

```

<http://jsfiddle.net/W2agx/>

* also don't reuse id's. use a class for multiple DOM elements that you want to be able to select together.