title: On click element should hide from parent element
body: <p>In a given task, I used "data-row" four times and in it there is a link have "Edit".</p>
  
  <p>I want that when I click on "Edit", then this should hide with "data" class and display "get-input" only form current "data-row". In my query when I click on "Edit", it hide from all "data-row".</p>
  
  <p>What is the logic for that?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="data-row"&gt;
      &lt;span class="data-label"&gt;Email:&lt;/span&gt;
      &lt;span class="data"&gt;&lt;a href="mailto:info@apus.edu"&gt;info@sjsu.edu&lt;/a&gt;  &lt;/span&gt;
      &lt;div class="hidden get-input phone"&gt;
          &lt;input type="phone" placeholder="Enter phone number" value="877-755-2787"&gt;
      &lt;/div&gt;
      &lt;a href="#" class="edit-contact orange f-right"&gt; Edit&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.hidden {
      display: none;
  }
  
  .data-row {margin-bottom:20px}
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(".edit-contact").click(function () {
    $(this).addClass("hidden");
    $(".data").addClass("hidden");
    $(".get-input").removeClass("hidden");
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/dqm4mu6b/" rel="nofollow"><strong>Check Here JSFiddle</strong></a></p>