Show/Hide toggle using jQuery

Question

In my example, I am trying to choose a value and show the chosen text "value # selected". This works, however, I need to reshow the former element after clicking the link "Reset" which shows after "Choose Me" is clicked...

Here is my fiddle: http://jsfiddle.net/samjco/wG8qf/566/

HTML:

  <table id="main" border="1">
      <tr>
        <td class="value-entity">
          <div>Value 1 <a href="#" class="chooseme" data-value="Value 1">Choose Me</a></div>
          <div>Value 2 <a href="#" class="chooseme" data-value="Value 2">Choose Me</a></div>
        </td>
        <td class="sel-value"></td>
      </tr>

      <tr>
        <td>Something Unrelated</td>
      </tr>

      <tr>
        <td class="value-entity">
          <div>Value 3 <a href="#" class="chooseme" data-value="Value 3">Choose Me</a></div>
        </td>
        <td class="sel-value"></td>
      </tr>

      <tr>
        <td>Something else Unrelated</td>
      </tr>

    </table>

JS

$(function() {
  $("#main").on({
      'click': function(event) {
        event.preventDefault();
        var Data = $(this).attr('data-value');
        var Value = '<div class="sel-value-text">'+ Data +' was selected </div><a href="#" class="show-value-entity">Reset</a>';

        $(this).closest("td.value-entity").nextUntil("td.value-entity").show().html(Value);
        $(this).parents("td.value-entity").hide();
         //alert($(this).attr('data-value'));
         console.log($(this).attr('data-value'));
      }
    },
    "a.chooseme", null);
});

CSS

td.sel-value {
  display: none;
}

Answer 1

Just add a code for reset in the same click event. And remove chooseme from the click event selector.

 $("#main").on({
      'click': function(event) {
        ...
        ...
      }
    },
    "a", null);  

Below is the Snippet

$(function() {
  $("#main").on({
      'click': function(event) {
        event.preventDefault();
        if($(this).hasClass("chooseme")){
        var Data = $(this).attr('data-value');
        var Value = '<div class="sel-value-text">'+ Data +' was selected </div><a href="#" class="show-value-entity reset">Reset</a>';
        
        $(this).closest("td.value-entity").nextUntil("td.value-entity").show().html(Value);
        $(this).parents("td.value-entity").hide();
         console.log($(this).attr('data-value'));
         }else{
        	event.preventDefault();
        
        $(this).parents("td.sel-value").parent().find(".value-entity").show();
        $(this).parents("td.sel-value").hide();
        }
      }
    },
    "a", null);
    
});

td.sel-value {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main" border="1">
  <tr>
    <td class="value-entity">
      <div>Value 1 <a href="#" class="chooseme" data-value="Value 1">Choose Me</a></div>
      <div>Value 2 <a href="#" class="chooseme" data-value="Value 2">Choose Me</a></div>
    </td>
    <td class="sel-value"></td>
  </tr>
  
  <tr>
    <td>Something Unrelated</td>
  </tr>
  
  <tr>
    <td class="value-entity">
      <div>Value 3 <a href="#" class="chooseme" data-value="Value 3">Choose Me</a></div>
    </td>
    <td class="sel-value"></td>
  </tr>
  
  <tr>
    <td>Something else Unrelated</td>
  </tr>
  
</table>

You can test it on JSFiddle as well..

http://jsfiddle.net/nimittshah/wG8qf/591/

Thanks--