javascript - 单击具有唯一 ID 的链接上的事件

Question

在我有链接的页面上，通过单击它们，它会删除一个元素。这是我的代码:

<a href="#" class="remove-existed-field" id="link0">Delete input</a>
<a href="#" class="remove-existed-field" id="link1">Delete input</a>

等等。如您所见，链接因 ID 而异，因此可以有数百个具有唯一 ID 的链接。我需要删除离它们最近的 li 元素。我是这样做的:

$(document).ready(function () {

$('#link0').click(function (e) {
    e.preventDefault();
    $(this).closest('li').remove();
  })

});

适用于 id="link0"

我试图通过这样做将 id 的数字部分放入变量 i 中:

var i = 0;

$('#link0' + i).click(function (e) {
    e.preventDefault();
    $(this).closest('li').remove();
  })

但我想不通，如何让它工作以及我应该如何增加 i(我应该把代码 i++ 放在哪里)。任何帮助将不胜感激。谢谢!

Answer 1

你可以使用classes代替ids...

你可以这样做:

$(document).ready(function() {

   $('.remove-existed-field').on('click', function(e) {
   		$(this).closest('li').remove();
   })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a href="#" class="remove-existed-field" id="link0">Delete input</a></li>
<li><a href="#" class="remove-existed-field" id="link1">Delete input</a></li>

希望这对您有所帮助!