Question

我正在使用jQuery设置一些<li>和锚标记。现在我想在锚点击中删除附加li。让我在代码上显示我想要做什么。我不能在这些元素动态生成时为这些元素分配任何id。

 <ul id="imagess">
<li><img width="60" height="60" src="http://example.com/images/event.png"></li><a href="javascript:void(0);" onclick="deleteit('event.png')"> <img style="float: left;   margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png"></a>    
<li><img width="60" height="60" src="http://example.com/images/event2.png"></li><a href="javascript:void(0);" onclick="deleteit('event2.png')"> <img style="float: left;   margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png"></a>
</ul>

我正在尝试删除<li> js函数调用上的deletit()

Answer 1

使用事件委派的当前HTML解决方案。

$(document).on('click', 'li + a', function(){
    $(this).prev().remove();
})

但是，您的HTML / JS应该看起来更像是有效的：

$(document).on('click', '#imagess li a', function(){
  console.log(this);
    $(this).closest('li').remove();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<ul id="imagess">
      <li>
        <img width="60" height="60" src="http://example.com/images/event.png">
        <a href="javascript:void(0);">
          <img style="float: left;   margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
        </a>
      </li>
      <li>
        <img width="60" height="60" src="http://example.com/images/event2.png">
        <a href="javascript:void(0);">
          <img style="float: left;   margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
        </a>
      </li>
    </ul>

Answer 2

你有jQuery标签，所以这里有一个例子：

$(this).closest('li').prev().remove();

更新：根据问题详细信息的措辞和您的评论，听起来path是锚本身，并且您不想删除之前的li，而是容器{{1如果是这样，请改为：

li

更新2

检查一下：

$(path).closest('li').remove();

但是，这仅适用于您的无效HTML，其中$('#imagess').on('click', 'a', function() { $(this).prev('li').remove(); return false; })直接位于<a>内。以正确的方式，<ul>应该在<a>内，我看到它现在已在另一个答案中修复。

Answer 3

$('ul a').click(function() {
    $(this).prev().remove();
});

prev()获取前一个兄弟a元素，即li。 remove()非常自我解释。

此外，您的HTML无效。允许作为ul的直接子项的唯一元素是li元素。

编辑：如果您在a内移动li，上面给出的“最近”的答案将是正确的。人们假设他们已经在那里，因为HTML无效。

Answer 4

更新：从a标记中删除内联onclick属性，因为您已在代码本身中定义了click事件以前的小提琴：http://jsfiddle.net/Lp88exqb/ 新小提琴：http://jsfiddle.net/Lp88exqb/1/

您不应将a代码作为ul代码的直接子代，它应位于li代码中，而您必须使用以下代码删除之前的li代码点击任何

$('ul a').click(function() {
$(this).parent().prev().remove(); 
});

Answer 5

1. Step 1
   Your HTML CODE has to be like this
   -------------------------------------
    <code>
     <ul id="imagess">
         <li>Img1</li>
            <a href="javascript:void(0);" onclick="deleteit(this)">Img1</a> 
         <li>Img2</li>
            <a href="javascript:void(0);" onclick="deleteit(this)">Img2</a>
     </ul>
    </code>
-------------------------------------------
2. Write a JS Funcion like this
-------------------------------------------
   function deleteit(obj){
       $(obj).prev('li').remove();
    }

如何在锚点击中删除以前的li

5 个答案: