title: How to get the <tr> based on the data-* attribute of a child element?
body: <p>I can get the id of the data already but the problem how to find that data on html</p>
  
  <p>this is my html</p>
  
  <pre><code>&lt;table cellspacing="0" cellpadding="0" border="0" id="cards" class="table table-striped table-bordered"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Description&lt;/th&gt;
              &lt;th&gt;By&lt;/th&gt;
              &lt;th&gt;Total Votes&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;If the opening scene of this show scared you as a kid, DRINK!&lt;/td&gt;
              &lt;td&gt;testing testing&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;
                  &lt;a data-id="1" data-target="#viewCard" data-toggle="modal" class="btn btn-default btn-xs view" href="#"&gt;&lt;span class="fa fa-eye"&gt;&lt;/span&gt; View Card&lt;/a&gt;
                  &lt;a data-id="1" data-target="#editCard" data-toggle="modal" class="btn btn-primary btn-xs edit" href="#"&gt;&lt;span class="fa fa-edit"&gt;&lt;/span&gt; Edit&lt;/a&gt;
                  &lt;a data-id="1" data-target="#deleteCard" data-toggle="modal" class="btn btn-danger btn-xs delete" href="#"&gt;&lt;span class="fa fa-remove"&gt;&lt;/span&gt; Delete&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          ...
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>so when the popup out... It will show button and this is the <code>.submitDelete</code></p>
  
  <p><code>&lt;a href="#" data-id="" class="btn btn-danger btn-xs submitDelete"&gt;Delete&lt;/a&gt;</code></p>
  
  <p>and js</p>
  
  <pre><code> $(document).on('click', '.submitDelete', function(e){
          e.preventDefault();
  
          var card_id     = $(".submitDelete").data('card_id');
          var test = $("#cards table tr .delete[data-id='"+card_id+"']"); //&lt;---- idk how to get the tr to be remove... this is what I've tried so far.
          console.log(test);
  });
  </code></pre>
  
  <p><strong>EDIT1</strong>
  I added jsfiddle so you guys know the flow</p>
  
  <p><a href="http://jsfiddle.net/sdxaV/1/" rel="nofollow">http://jsfiddle.net/sdxaV/1/</a></p>
  
  <p><strong>EDIT2</strong>
  <a href="http://jsfiddle.net/sdxaV/12/" rel="nofollow">http://jsfiddle.net/sdxaV/12/</a></p>