Question

<div class='selected><div class="test"></div><div class="cancel"></div></div>

我需要在单击取消类后隐藏选定类的div。其中有很多，因此必须是前一个。

我尝试这样做，但是它不起作用：

 $(document).on('click','.cancel',(e)=>{


        $(e.currentTarget).prev('.selected').hide()
    })

它注册点击，但不隐藏.selected

Answer 1

请将结束类引号<div class='selected>放在<div class='selected'>上，并使用以下代码，因为.selected是父代，所以：

$(".cancel").on("click",function(e){
 $(this).closest('.selected').hide();
});

Answer 2

使用closest获取最接近的祖先。或者要使用prev获得同级，请更新HTML。

两者都能解决您的问题，但不确定是否要隐藏取消。

$(document).on('click', '.cancel', (e) => {
  $(e.currentTarget).prev('.selected').hide()
})

$(document).on('click', '.cancel', (e) => {
  $(e.currentTarget).closest('.selected').hide()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='selected'>
  <div class="test">Selected Parent</div>
  <div class="cancel">Cancel</div>
</div>

<hr />

<div>
  <div class='selected'>
    <div class="test">Selected Sibling</div>
  </div>
  <div class="cancel">Cancel</div>
</div>

此方法将找到同级，但隐藏父级。似乎是您真正想要的。

$(document).on('click', '.cancel', (e) => {
  $(e.currentTarget).prev('.selected').parent().hide()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class="test selected">Selected Parent</div>
  <div class="cancel">Cancel</div>
</div>

如何从当前目标隐藏上一个div？

2 个答案: