Jquery replaceWith and back to original

I'm trying to replace a row (tr) with a new row and when pressing an icon in the new row, I get back to the original content or row. I was able to replace the original tr by the new row, however, how do i return to the original content when pressing the chevron-circle-right?

HTML

<table class="full bowders list margin-top-15-alt">
 <tr class="line-bottom">
  <td class="list-check hide-mobile">
   <input type="checkbox" id="1" name="list">
   <label for="1"></label>
  </td>
  <td class="list-subject">
   <a href="">FC Barcelona - Club Brugge</a>
   <div>24/08/2014 - First Team - Match</div>
  </td>
  <td class="list-options float-right">
   <div class="show-mobile options-mob"><i class="fa fa-chevron-circle-right"></i></div>
  </td>
 </tr>
</table>

JQUERY

$('.list .list-options').click( function() {
  var new_row = '<tr class="line-bottom"><td class="list-options float-right">DELETE<span class="mobile-option"><i class="fa fa-times"></i></span></td></tr>'
  $(this).parent().replaceWith(new_row);
});

Thank you!

Solution

So I changed a few things to save the old html.

var new_row = '<tr class="line-bottom"><td class="list-options deleted float-right">DELETE<span class="mobile-option"><i class="fa fa-times"></i></span></td></tr>';

$('.list').on('click', ' .list-options', function () {
    $p = $(this).parent();
    if (!$(this).hasClass('deleted')) {
        $p.replaceWith($(new_row).data('old', $p[0].outerHTML));
    } else {
        $p.replaceWith($(this).parent().data('old'));
    }
});

You may notice that the .on() structure changed. This new form allows it to also run when you click on dynamically created elements. The new element will also get the class deleted.

The code caches the old html in jQuery's data to use it later on, although as suggested in another answer, hiding it will be the easiest solution.

See it below in action.

var new_row = '<tr class="line-bottom"><td class="list-options deleted float-right">DELETE<span class="mobile-option"><i class="fa fa-times"></i></span></td></tr>';

$('.list').on('click', ' .list-options', function() {
  $p = $(this).parent();
  if (!$(this).hasClass('deleted')) {
    $p.replaceWith($(new_row).data('old', $p[0].outerHTML));
  } else {
    $p.replaceWith($(this).parent().data('old'));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="full bowders list margin-top-15-alt">
  <tr class="line-bottom">
    <td class="list-check hide-mobile">
      <input type="checkbox" id="1" name="list">
      <label for="1"></label>
    </td>
    <td class="list-subject"> <a href="">FC Barcelona - Club Brhghhgugge</a>

      <div>24/08/2014 - First Team - Match</div>
    </td>
    <td class="list-options float-right">
      <div class="show-mobile options-mob"><i class="fa fa-chevron-circle-right">delete</i>

      </div>
    </td>
  </tr>
  <tr class="line-bottom">
    <td class="list-check hide-mobile">
      <input type="checkbox" id="1" name="list">
      <label for="1"></label>
    </td>
    <td class="list-subject"> <a href="">FC Barcelona - Club Brugge</a>

      <div>24/08/2014 - First Team - Matchhghghg</div>
    </td>
    <td class="list-options float-right">
      <div class="show-mobile options-mob"><i class="fa fa-chevron-circle-right">delete</i>

      </div>
    </td>
  </tr>
  <tr class="line-bottom">
    <td class="list-check hide-mobile">
      <input type="checkbox" id="1" name="list">
      <label for="1"></label>
    </td>
    <td class="list-subject"> <a href="">FC Barcelona - Club Brugge</a>

      <div>24/08/2014 - First Team - Matchdsad</div>
    </td>
    <td class="list-options float-right">
      <div class="show-mobile options-mob"><i class="fa fa-chevron-circle-right">delete</i>

      </div>
    </td>
  </tr>
</table>

And a fiddle http://jsfiddle.net/05en6tga/