CODEWITHSUNDEEP
javascriptjqueryhtmlreplacewith
kurious-ser
kurious-ser

Reputation: 7

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!

Upvotes: 0

Views: 1277

Answers (2)

Spokey
Spokey

Reputation: 10994

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/

Upvotes: 1

Jaime Rey
Jaime Rey

Reputation: 118

Have you considered the possibility of hide the row instead of replacing it? You could use styles for that, and also to get the original row back, re-hiding (or deleting, that's up to you) the new one...

Without this, there are several alternatives, for example, save the original content in a "var originalRow" to be able to restore it.

Upvotes: 0

Related Questions