title: jquery selector.closest function
body: <p>I have a small classified ads script that has been developed in laravel with of course some jQuery functionalities. I just applied some changes on behalf of the design sturcture, however I have an issue with a script.</p>
  
  <p>Old markup:</p>
  
  <pre><code>    @foreach($ads as $ad)
          &lt;tr&gt;
              &lt;td width="100"&gt;
                  &lt;img src="{{ media_url($ad-&gt;feature_img) }}" class="img-responsive" alt=""&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;h5&gt;&lt;a href="{{ route('single_ad', $ad-&gt;slug) }}" target="_blank"&gt;{{ $ad-&gt;title }}&lt;/a&gt; ({!! $ad-&gt;status_context() !!})&lt;/h5&gt;
                  &lt;p class="text-muted"&gt;
                      &lt;i class="fa fa-map-marker"&gt;&lt;/i&gt; {!! $ad-&gt;full_address() !!} &lt;br /&gt;  &lt;i class="fa fa-clock-o"&gt;&lt;/i&gt; {{ $ad-&gt;posting_datetime()  }}
                  &lt;/p&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;a href="{{ route('edit_ad', $ad-&gt;id) }}" class="btn btn-primary"&gt;&lt;i class="fa fa-edit"&gt;&lt;/i&gt; &lt;/a&gt;
                  &lt;a href="javascript:;" class="btn btn-danger deleteAds" data-slug="{{ $ad-&gt;slug }}"&gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt; &lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      @endforeach
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>        $('.deleteAds').on('click', function(){
              if ( ! confirm('{{ trans('app.are_you_sure') }}')){
                  return '';
              }
              var selector = $(this);
              var slug = selector.data('slug');
              $.ajax({
                  url : '{{ route('delete_ads') }}',
                  type: "POST",
                  data: {slug:slug, _token:'{{ csrf_token() }}'},
                  success : function (data) {
                      if (data.success == 1){
                          selector.closest('tr').hide('slow');
                          toastr.success(data.msg, '@lang('app.success')', toastr_options);
                      }
                  }
              });
          });
  </code></pre>
  
  <p>This function is being triggered once I decide to delete an item (one of my classifieds) and will than hide the related tr as well as generate a success message (toastr)</p>
  
  <p>Now the new markup is a bit more extensive being:</p>
  
  <pre><code>    @foreach($ads as $ad)
      &lt;!-- ad-item --&gt;
      &lt;div class="ad-item row"&gt;
          &lt;div class="item-image-box col-sm-4"&gt;
              &lt;div class="item-image"&gt;
                  &lt;a href="{{ route('single_ad', $ad-&gt;slug) }}"&gt;&lt;img src="{{ media_url($ad-&gt;feature_img) }}" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item-info col-sm-8"&gt;
              &lt;div class="ad-info"&gt;
                  &lt;h3 class="item-price"&gt;$800.00&lt;/h3&gt;
                  &lt;h4 class="item-title"&gt;&lt;a href="{{ route('single_ad', $ad-&gt;slug) }}"&gt;{{ $ad-&gt;title }} / ({!! $ad-&gt;status_context() !!})&lt;/a&gt;&lt;/h4&gt;
                  &lt;div class="item-cat"&gt;
                      &lt;span&gt;&lt;a href="#"&gt;Electronics &amp;amp; Gedgets&lt;/a&gt;&lt;/span&gt; /
                      &lt;span&gt;&lt;a href="#"&gt;Tv &amp;amp; Video&lt;/a&gt;&lt;/span&gt;
                  &lt;/div&gt;                                      
              &lt;/div&gt;
              &lt;div class="ad-meta"&gt;
                  &lt;div class="meta-content"&gt;
                      &lt;span class="dated"&gt;Posted On: &lt;a href="#"&gt;{{ $ad-&gt;posting_datetime() }}&lt;/a&gt;&lt;/span&gt;
                      &lt;span class="visitors"&gt;Visitors: 221&lt;/span&gt; 
                  &lt;/div&gt;                                      
                  &lt;div class="user-option pull-right"&gt;
                      &lt;a class="edit-item" href="{{ route('edit_ad', $ad-&gt;id) }}" data-toggle="tooltip" data-placement="top" &gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;a class="deleteAds delete-item" href="javascript:;" data-toggle="tooltip" data-placement="top" &gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ad-item --&gt;
      @endforeach
  </code></pre>
  
  <p>I've tried to change the jQuery part of <strong>selector.closest('tr').hide('slow');</strong> to become <strong>selector.closest('ad-item').hide('slow');</strong> however it does not seem to work or do the job.</p>
  
  <p>Any ideas how I can tweak the related jQuery part to have this function work again? Some expert advise would be greatly appreciated.</p>