Question

如何使用jquery删除/隐藏最接近的元素？

我想隐藏与班级最小的元素＆＃39; tiny-user-block＆＃39;当我点击拒绝。

Jquery的：

$('body').on('click', '.deny-friend-request', function(e) {
  e.stopImmediatePropagation();
  e.preventDefault();

  var obj = $(this);
  var friendship_id = parseInt(obj.attr('data-friendship-id'));
  var from_user_id = parseInt(obj.attr('data-profile-id'));
  obj.closest('.friend-request').find('.is-pending-friend-request').css('background', '#82b964');
  obj.closest('.friend-request').find('.is-pending-friend-request').html('<i class="fa fa-user-plus"></i> Friend');
  obj.closest('.friend-request').find('.is-pending-friend-request').addClass('no-friend-sent');
  obj.closest('.friend-request').find('.is-pending-friend-request').removeClass('is-pending-friend-request');
  obj.closest('.friend-request').find('ul').addClass('hidden');
  obj.closest('.friend-request').find('ul .accept-friend-request').addClass('cancel-friend-request');
  obj.closest('.friend-request').find('ul .cancel-friend-request').html('<a href="#">Cancel</a>');
  obj.closest('.friend-request').find('ul .cancel-friend-request').removeClass('accept-friend-request');
  obj.closest('.friend-request').find('ul .deny-friend-request').remove();
  obj.closest('.friend-request').attr('title', 'Add as friend').tooltip('fixTitle').tooltip('show');
  obj.closest('.tiny-user-block').fadeOut('slow');
});

行动准则：https://jsfiddle.net/pxcwveuh/

修改
我发现了问题。
如果你正在使用＆＃34; slim＆＃34;似乎会发生这种情况。 jQuery的版本。只有＆＃34;完整＆＃34; jQuery的版本包括动画效果。

Answer 1

您应该对其应用相同的data-friendship-id属性，然后搜索它。这是最有效的方式。请参阅更新的小提琴：https://jsfiddle.net/sbgax5h9/

.fadeOut（）由于某种原因不是函数。可能是jQuery版本的东西。所以我用.hide（）替换它。

UPD：它首先与缓存tidyBlock有关。请看更新的小提琴。 https://jsfiddle.net/sbgax5h9/1/。现在没有ID工作。

Answer 2

我希望隐藏与班级最近的元素＆＃39; tiny-user-block＆＃39;当我点击拒绝。

这很简单，因为拒绝按钮包含在tiny-user-block内所有你需要的是closest()：

＆＃13;

$('body').on('click','.deny-friend-request', function() {
  $(this).closest('.tiny-user-block').hide()
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 col-sm-12">
  <div class="tiny-user-block clearfix">
    <div class="user-img"> <img src="http://img.actucine.com/wp-content/uploads/2017/07/Captain-America.jpg" alt="User" width="50" height="50" /> </div>
    <h3><a href="#">Mark</a></h3>
    <ul>
      <li>Ranking: <strong>1</strong></li>
      <li>Friends: <strong>42</strong></li>
    </ul>
    <div class="row">
      <div class="btn-group" style="text-transform: lowercase;margin-left:15px">
        <div class="btn-group btn-group-xs friend-request tooltiped" data-toggle="tooltip" title="Friend request in pending...">
          <button type="button" class="btn btn-danger add-friend-single-btn is-pending-friend-request dropdown-toggle" data-toggle="dropdown" style="min-width:65px;" data-profile-id="1">
            <i class="fa fa-user-plus"></i> Pending
            <span class="caret"></span>
          </button>

          <ul class="dropdown-menu">
            <li class="accept-friend-request" data-friendship-id="320" data-profile-id="1"><a href="#">Accept</a></li>
            <li class="deny-friend-request" data-friendship-id="320" data-profile-id="1"><a href="#">
                                deny</a></li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

作为旁注，当你做这样的事情时，你真的做了很多额外的不必要的工作（对你自己和用户的处理器）：

  obj.closest('.friend-request').find('.is-pending-friend-request').css('background', '#82b964');
  obj.closest('.friend-request').find('.is-pending-friend-request').html('<i class="fa fa-user-plus"></i> Friend');
  obj.closest('.friend-request').find('.is-pending-friend-request').addClass('no-friend-sent');
  obj.closest('.friend-request').find('.is-pending-friend-request').removeClass('is-pending-friend-request');

每次打电话给最近的＆＃39;和＆＃39;找到＆＃39;浏览器必须再次遍历DOM才能找到您在上一行中访问的相同节点。

你可以加快速度，节省大量的打字工作，并通过将这些代码链接在一起，使你的代码更具可读性：

obj.closest('.friend-request')
    .find('.is-pending-friend-request')
    .css('background', '#82b964')
    .addClass('no-friend-sent')
    .removeClass('is-pending-friend-request')
    .html('<i class="fa fa-user-plus"></i> Friend')

...或将DOM搜索缓存在临时变量中：

var isPendingRequest = obj.closest('.friend-request').find('.is-pending-friend-request');
isPendingRequest.addClass(...) // etc

如何使用jquery删除/隐藏最接近的元素

2 个答案: