Question

我有一个<ul>元素，其中有一些<li>个元素。列表项包含实际项目之前的一些内容，方法是使用list-style-type: none;和:before

删除带有x的标准点

HTML

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

CSS

ul li:before {
    content:"x";
    position:relative;
    left:-25px;
}

JQuery的

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

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

这里的idéa是当我点击“x”时，应该删除列表项。但是，由于remove函数适用于整个元素，因此用户点击的位置无关紧要。

所以问题是：是否有可能只使用“x”可点击删除整个项目？

JSfiddle上的完整代码：

https://jsfiddle.net/L15kygu4/

编辑：似乎最好的方法是制作一个<span>元素并将click事件附加到它而不是使用伪元素。

Answer 1

因此，可以点击孔部分的原因是，因为X是整个LI-Tag的一部分，并且您无法访问:before和:after伪元素。

您可以使用以下技巧：Access the css ":after" selector with jQuery

或者你可以把另一个元素听听，如下所示：

<强> HTML

<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>

Javascript / jQuery

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

JSFiddle：https://jsfiddle.net/L15kygu4/3/

Answer 2

您可以使用Jquery的<!DOCTYPE html> <html> <head> <title>Running Tracker</title> <link rel="stylesheet" href="css/style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> <script src="js/script.js"></script> </head> <body>  <div data-role="page" id="home"> <header data-role="header" data-theme="a"> <h1>Running Tracker</h1> </header> <div data-role="navbar"> <ul> <li> <a href="#home" data-transition="none" data-icon="home">Home</a> </li> <li> <a href="#add" data-transition="none" data-icon="plus">Add Run</a> </li> </ul> </div> <div data-role="content"> <h3>Welcome to the RunningTracker App</h3> <p> With this app you can track your running, jogging or walking. </p> <h3>Your Latest Runs:</h3> <ul id="stats" data-role="listview" data-filter="true" data-filter-placeholder="Filter runs by date or distance." data-inset="true"></ul> <br/> <button id="clearRuns" onclick="return confirm('Are You Sure?')"> Clear Data </button> </div> <footer data-role="footer"> <h4>RunningTracker © 2015 GZ</h4> </footer> </div>  <div data-role="page" id="add"> <header data-role="header" data-theme="a"> <h1>Running Tracker</h1> </header> <div data-role="navbar"> <ul> <li> <a href="#home" data-transition="none" data-icon="home">Home</a> </li> <li> <a href="#add" data-transition="none" data-icon="plus">Add Run</a> </li> </ul> </div> <div data-role="content"> <h3>Add Run</h3> <form id="addForm"> <label for="km">Enter Kilometres:</label> <input type="number" id="addKms"> <label for="km">Enter Date:</label> <input type="date" data-role="date" class="date" id="addDate" data-inline="true"> <button id="submitAdd" class="ui-btn ui-corner-all"> Add Run </button> </form> </div> <footer data-role="footer"> <h4>RunningTracker © 2015 GZ</h4> </footer> </div> </body> </html>函数将X作为带有给定类的span插入。然后，您可以向其附加单击事件处理程序，找到父.prepend()元素，然后将其删除。

您无法使用css中的psuedo元素执行此操作，因为您无法将html作为伪元素插入。由于您只能插入文本而不能插入标记，因此您无需为其注册单击事件处理程序。更好的解决方案是使用Jquery的DOM操作函数添加'X'。

DOM Outer Manipulation Functions
DOM Inner Manipulation Functions

Updated JS Fiddle

<强> JQUERY

li

<强> CSS

$().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(); 
    });
});

Answer 3

我认为您不能在pseudo-elements上设置点击事件，因为它们不属于DOM。您可以将事件绑定到其parent元素。

Pseudo Elements没有代表它的HTMLElementNode对象

Answer 4

执行此操作的快速而肮脏的方法是（因为您知道按钮位于左侧）是比较单击位置与元素左侧偏移的位置：

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

注意：offset是一个非常繁重的功能。如果您关注性能，请不要使用此功能。如果元素是静态定位的（即它们不会四处移动），您可以通过仅计算.offset()一次并将其存储在外部变量中来改善这一点。

这里更新了小提琴：https://jsfiddle.net/tLtb3k43/

如何使用ul li删除<li>元素：之前点击内容？

4 个答案: