删除父元素而不点击子元素

Question

我有图层A和图层B在图层A内部

http://jsfiddle.net/PhZhY/

使用jQuery函数remove()是否可以仅点击图层A而不是图层B来删除图层A？

- Goldie

---

如果你想要保留B，我假设你是这样想的，那么B不能是A的子元素。你需要将其放置在A的上方，但仍保持其作为自己独立实体的状态。 - Rick Calder

问题被编辑了吗？我很确定它是要求保持不变的“B”提出的。 - loler

不，它没有被编辑过。否则你会看到编辑信息。 - Goldie

Answer 1

$("body").on("click", ".a1", function(e) {
    if (this === e.target) $(this).remove();
});​

演示: http://jsfiddle.net/PhZhY/1/

- VisioN

---

是的，但重点不是通过单击B来触发函数。 - MaciejLisCK

不，他希望B保持完整，即使其父级被删除。 - Andy

标题：不点击子元素删除父元素 - MaciejLisCK

@RickCalder 不，fiddle中的函数具有其他功能。 - MaciejLisCK

点击图层A而不是图层B，使用jQuery函数remove()是否可以删除图层A？您认为保留B的意义在哪里？ - VisioN

Answer 2

如果您想保留 .b1，并仅删除 .a1，请按如下操作：

$('.a1').live('click',function() {
     $(".b1", this).unwrap();
});

http://jsfiddle.net/PhZhY/3/

即使您不知道任何子元素，也可以删除该div：

注：此处的“div”指HTML中的一个元素。

$('.a1').live('click',function() {
     $(".a1 :first-child").unwrap();
});

如果你想在 .b2 中未被点击时移除 .a1 div，请使用以下代码：

http://jsfiddle.net/PhZhY/5/

$('.a1').live('click',function() {
     $(".a1 :first-child").unwrap();
});

$('.b1').live('click',function() {
 throw "stop execution";
});​

根据@Rick Calder的评论： 如果你想要改变类，可以使用.addClass()，如果想要移除类，可以使用.removeClass()。

链接：http://jsfiddle.net/PhZhY/6/

- loler

---

更好的答案，只需要调整类以保持B在位置上。 - Rick Calder

尽管（出于某种原因）它离开了B，但由于问题的原因，事件同时适用于单击A和B，这是无效的。 - VisioN

Answer 3

这是我读到这个问题的方式：

如果你点击 .b1，什么也不应该发生。如果你点击 .a1，它应该被移除。

如果这是意图，这里是 jQuery 代码：

$('.b1').click( function(e){
  e.stopImmediatePropagation();
});

$('.a1').click( function(){
  $(this).remove();
});

这里有一个jsbin。注意：CSS、HTML无耻地从@Vision的jsFiddle中窃取。

- Abhilash