javascript - Can't remove hashtag from url after click event -

i tried every solution found website , other no success. doing rotating button using css3 animation. doing having button linked(using "a" element) , enabling animation using pseudo element :target(almost equal onclick event works in case).

my problem when click button @ first time hash-tag(#btnq1 in case) being added url.

now, actual problem, cannot remove hash-tag when reload whole page or if want click button 1 more time , re-run animation. tried solutions stackoverflow questions this or this didn't got result.

see below code:

you can ignore initial phase of animation named q1. html code:

<header> <div id="title"> title </div> </header>  <main> not important text  <div id="q1"> <div class="q1once"> <a href="#btnq1"><button type="button" name="" value="" id="btnq1">click rotate</button></a> </div> </div> </main> 

css code:

#q1{     height:100%;     }  .q1once{     width:20%;     height:15%;     position:absolute;     left:-50%;     animation-name:q1;     animation-delay:3s;     animation-iteration-count:1;     animation-duration:1.5s;     animation-fill-mode:forwards;     }  #btnq1:target{     animation-name:q1leave;     animation-iteration-count:1;     animation-duration:4s;           }  @keyframes q1{ 50%{     transform:translate(440%) scalex(3);     } 100%{     transform:translate(450%) scale(1.5,2);     } } @keyframes q1leave{     0%{transform:rotate(0deg);         opacity:1;         }     100%{         opacity:0;         transform:rotate(360deg);         } 

}

you can check updated jsfiddle well.

adding window.location.hash='' on load of page partial solution because removes hashtag when reload page. however, doesn't remove hashtag after click @ button @ first time. want happen in order able rotate button more once.

try this

$('#btnq1').click(function(event){    event.preventdefault();    // action }); 

hashtags not added anymore