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

你可以使用带选择器的开头。

$('[id^=link]').click(

它将定位id以link

开头的所有元素

Answer 2

您可以使用classes代替ID ...

你可以这样做：

$(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>

希望这有帮助！

Answer 3

如果您要处理每个链接a，那么您可以在class上进行处理。如果您真的需要，也可以获得点击链接的id。

$(document).ready(function () {
   $('a.remove-existed-field').click(function (e) {
      e.preventDefault();
      // $(this).attr('id');
      $(this).closest('li').remove();
  });

});

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

3 个答案: