javascript - 如何删除 anchor 点击上的前一个li

Question

我正在设置一些<li>和使用 jQuery 的 anchor 标记。现在我想删除 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>

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

Answer 1

使用事件委托(delegate)针对当前 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>