How to set/unset active links

How to set/unset active links

I have a set of links (same URL).  I'd like to make the following changes to the "li" element when its associate link is clicked:

1) Add a class='active' to li element.

2) Remove the "a" anchor, and keep only the "span" element.

   **HTML before jQuery:**

    <ul class="navbar-list">
       <li><a href='#' data-id="1" > <span>Link 1</span></a> </li>
       <li><a href='#' data-id="2" > <span>Link 2</span></a> </li>
       <li><a href='#' data-id="3" > <span>Link 3</span></a> </li>
    </ul>

Using jQuery:

    $('ul.navbar-list li a').on('click', function() {
    $(this).parent("li").addClass('active');         
    $("ul.navbar-list li.active a").contents().unwrap();});

 **HTML after jQuery (assume the first link is clicked):**

    <ul class="navbar-list">
       <li class='active'><span>Link 1</span></li>
       <li><a href='#' data-id="2" > <span>Link 2</span></a> </li>
       <li><a href='#' data-id="3" > <span>Link 3</span></a> </li>
    </ul>

Question:

I need to reset and remove the above behaviors when another link is clicked (I want link 1 to have "active" class removed, and anchor restored).  What's the best way to do this?

Thanks!