如何删除锚点上的先前li

Question

我正在使用jQuery设置一些<li>和anchor标签。 现在我想删除锚点单击上的附加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>

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 ，但是如果要删除容器li本身，请更改为：

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

更新2

检查一下：

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

但是，这仅适用于<a>直接位于<ul>内部的无效HTML。 以正确的方式， <a>应该位于<li> ，我现在已经将其固定在另一个答案中。

Answer 3

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

prev()获取a元素的前一个同级元素，即li 。 remove()很容易解释。

另外，您的HTML无效。 ul的唯一直接子元素是li元素。

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

Answer 4

更新：删除内嵌的onclick属性从a标签，你已经在代码中定义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();
    }