traverse button from span to span

Question

I am newly learning jQuery and java script,currently i am facing a problem in showing the hidden button,my html is

<span style="float:left;padding-right:10px">
    <input type="button" value="image" class="delete" />
    <a href="/media/image"><img src="/media/image" /></a>
</span>
<span style="float: left; padding-top: 5px;">
    <a href="/media/image">
        <button  type="submit" class="delete_media">Delete</button>
    </a>
</span>

Jquery:

$(".delete").click(function(){         
 var $this = $(this);   
 $this.siblings(".delete_media").toggle();             
});

css:

.delete_media {    
    display:none;
    float: right;
    height: 25px;
    width: 60px;
    -moz-border-radius: 10px;
    border-radius:10px;    
}

Also i tried using find,nextAll,closest also nothing worked so how to make this work.

Demo Here

Answer 1

Try this

 $this.closest('span').next().find(".delete_media").toggle();   

DEMO