removeClass is not working if href exist in anchor

Question

I have a html look like this

<tr>  
    <td style="padding:0px;">
        <a class="list-group-item active change_class" href="<?php echo base_url()."index.php/tester/projectwise_issue_list_display/".$row->project_id;?>"><?php echo $row->project_name;?></a>
    </td> 
    <td style="padding:0px;">
        <a class="list-group-item active change_class" href="<?php echo base_url()."index.php/tester/projectwise_issue_list_display/".$row->project_id;?>"><?php echo $row->project_name;?></a>
    </td> 
</tr> 

When I click on the anchor it's not removing my class.

jquery is below....

jQuery('td').click(function () {
    jQuery(this).find('a').removeClass('change_class');
});

If I remove href from anchor it's nicely working. I need removeClass with href

Answer 1

Just Change Script like below

<script type="text/javascript">
  jQuery('td').click(function (e) {
      e.stopPropagation();  
      jQuery(this).find('a').removeClass('change_class');
  });
</script>

Answer 2

You should call your click event on the anchor tag itself.

jQuery('td > a').click(function (e) {
    e.preventDefault(); 
    jQuery(this).removeClass('change_class');
});

Answer 3

May be you are looking for removing class from the anchors and you want to have navigation functionality too. Then you have to do this on ready event in a common js file:

jQuery(function($){
   $('a[href="' + window.location.href + '"]').removeClass('change_class');
});

What it is doing, when user clicks the anchor user gets navigated to the specified href. Navigation results in a page load so we put it directly inside a ready event. It removes the class if the href of anchor is same as window.location.href.