如何正确使用jquery prev？

Question

How to select the previous element using prev() ? I want when I click icon 1 it removes the span .

html.erb

# inside a loop -- notice the loop!.
<span data-id="foo_span">
  <i data-id="bar">icon 1</i>
  <i>icon 2</i>
</span>

JavaScript:

$("[data-id=bar]").click(function(e){
  e.preventDefault();
  //$(this).prev("[data-id=foo_span]").remove();
  $(this).prev().remove();
});

Am I using prev() correctly? Based on the examples, it uses .css . What's the correct method to remove the span tag? i must be inside a span tag.

Answer 1

您需要使用parent()方法，而prev()方法正在使用中，以获取该元素的紧前同级元素。

$(this).parent().remove();

Answer 2

This seems to work for me. Is this what you want?

https://jsfiddle.net/ndva0rkz/

$("body").on("click", ".f", function(e){ 
  e.preventDefault();
  //$(this).prev("[data-id=foo_span]").remove();
  $(this).prev().remove();
});
<span data-id="foo_span">
  <i class="f" data-id="bar">icon 1</i>
  <i class="f">icon 2</icon>
</span>

Answer 3

What about using parent() ?

$("[data-id=bar]").click(function(e){
  e.preventDefault();
  $(this).parent().remove();
});