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

How to remove previous li on anchor click

本文关键字：删除 li 单击      更新时间：2023-09-26

我正在使用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>

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

使用事件委托的当前 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>

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

prev()将前一个同级元素获取到 a 元素，即 li 。 remove()是不言自明的。

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

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

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

您不应该将a标签作为ul标签的直接子级，它应该位于li标签中，并且您必须使用以下代码在任何单击时删除以前的li

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

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

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

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

更新：从问题详细信息的措辞和您的评论来看，听起来path是锚点本身，并且您不想删除以前的li，但容器本身li，如果是这样，请更改为：

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

更新 2

检查这个：

$('#imagess').on('click', 'a', function() {
    $(this).prev('li').remove();
    return false;
})

但是，这仅适用于您的无效 HTML，其中<a>直接位于 <ul> 内。以正确的方式，<a>应该在<li>内，我看到现在在另一个答案中修复了。

相关文章：