Jquery 如何删除<；李>；通过使用ulli：在点击内容之前？

我有一个

元素，其中有一些

元素。列表项在实际项之前包含一些内容，方法是使用

列表样式类型：none删除带有x的标准点和
：在

HTML

<ul id="list1" class="basic">
    <li>space</li>
    <li>planet</li>
    <li>planet2</li>
</ul>

<div id="divlist1">
    <ul id="list1" class="basic">
        <li><span>x</span>space</li>
        <li><span>x</span>planet</li>
        <li><span>x</span>planet2</li>
    </ul>
</div>

JQuery

$("#list1").sortable();
$("#list1").disableSelection();

$("#list1").on("click", "li", function () {
    $(this).remove();
});

$("#list1 span").on("click", function () {
    $(this).parent().remove();
});

这里的idéa是当我点击“x”时，列表项应该被删除。但是，用户在何处单击并不重要，因为remove函数应用于整个元素

所以问题是：是否可以只点击“x”来删除整个项目

JSFIDLE上的完整代码：


编辑：实现这一点的最佳方法似乎是制作一个
元素并向其附加一个单击事件，而不是使用伪元素。
因此孔零件可单击的原因是，因为X是整个LI标记的一部分，您无法访问
：before
和
：after
伪元素

您可以使用以下技术：

或者，您也可以将另一个元素放入“收听”，如下所示：

HTML

<ul id="list1" class="basic">
    <li>space</li>
    <li>planet</li>
    <li>planet2</li>
</ul>

<div id="divlist1">
    <ul id="list1" class="basic">
        <li><span>x</span>space</li>
        <li><span>x</span>planet</li>
        <li><span>x</span>planet2</li>
    </ul>
</div>

jsIDLE:
我认为您不能在
伪元素上编写单击事件，因为它们不是
DOM
的一部分。您可以将事件绑定到它们的
父元素

伪元素没有表示它的
HTMLElementNode
对象
您可以使用Jquery的
.prepend（）
函数将X作为一个span插入到给定类中。然后，您可以将单击事件处理程序附加到它，找到父元素
li
并将其删除

在css中不能使用psuedo元素，因为不能将html作为psuedo元素插入。由于您只能插入文本，而不能插入标记，因此没有任何内容可注册单击事件处理程序。更好的解决方案是使用Jquery的DOM操作函数添加“X”





JQUERY

$().ready(function () {
    //insert an X before the li element.
    $("#list1 li").prepend('<span class="del_x">X</span>');
    //attach click event handler to the X spans
    $(".del_x").click(function(){
       //find parent li element and remove
       $(this).parent('li').remove(); 
    });
});

一种快速而肮脏的方法是（因为您知道按钮位于左侧）比较单击落下的位置与元素的左偏移：

if ( event.clickX < $(this).offset().left ) $(this).remove();

if（event.clickX<$（this.offset（）.left）$（this.remove（）；

注意：
offset
是一个相当繁重的函数。如果您担心性能，请不要使用此选项。如果元素处于静态位置（即，它们不会四处移动），您可以通过只计算
.offset（）
一次并将其存储在外部变量中来改进这一点

fiddle更新如下：
我必须删除第一个第二个函数，因为JSFIDLE说它们不存在。删除之后，脚本对我来说很好。如果我单击X，侧面的LI将被删除。@CagatayUlubay您可以单击LI的任何位置，它将删除以前的相同过程：这正是我想要知道的。智能使用跨度，因为它模拟相同的效果，效果更好！因为这里有两个很好的答案，我想知道两者之间的区别，哪一个更一致？区别在于你用javascript添加了X，这是不必要的。我的意思是，结尾的X应该总是存在的，所以为什么不在html中使用简单的X，而是在Javascript中插入exlusive呢？最好是文本多于实际代码，如果你的文本多于代码，谷歌会喜欢的。但不仅是谷歌，用户也会喜欢它，如果他们不依赖Javascript的话。做“另一种方式”也会激励你在将来做这件事，但是在做正确的事情之前会引导你先做正确的事情。不管怎样，如果你喜欢另一种方式，那就去做吧~我使用了你提供的代码，并设法使它变得动态。我实际上改变了正确答案，因为它更可靠。这个函数在哪个版本的JQuery上工作？它不适用于我，我使用的是1.8.3无论jQuery版本（1.2之后）如何，代码本身都应该可以工作。我将fiddle中的版本换成了2.0.2，因为您发布的原始fiddle返回了一个
。sortable是未定义的
错误（至少在我的浏览器中）。也许这是一个JSFIDLE错误。如。