Question

我有2到4 links个ID s。

这是我的代码：

<a href="#" id="link" class="hallo">Next 1</a>
<a href="#" id="link" class="hallo">Next 2</a>
<a href="#" id="link" class="hallo">Next 3</a>
<a href="#" id="link" class="hallo">Next 4</a>
<a href="#" id="link" class="hallo">Next Article</a>

我希望实现的是remove link clicked。例如：点击文字下一页的link时，我想删除link 。

我试过这个：

$(document).ready(function(){
    $('#link').click(function () {
        $('#link').closest('a.hallo').remove();
    });
});

但它只删除第一个链接（下一个）而不删除其他链接。

＆＃13;

$(document).ready(function(){
	$('#link').click(function () {
  		$('#link').closest('a.hallo').remove();
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="link" class="hallo">Next 1</a>
<a href="#" id="link" class="hallo">Next 2</a>
<a href="#" id="link" class="hallo">Next 3</a>
<a href="#" id="link" class="hallo">Next 4</a>
<a href="#" id="link" class="hallo">Next Article</a>

＆＃13;

Answer 1

首先，id必须是html中元素的唯一，其次，你的目标是带有id的元素，所以每次找到带有id链接的第一个元素时，你需要使用class属性和selector

HTML：

<a href="#" id="link1" class="hallo">Next 1</a>
<a href="#" id="link2" class="hallo">Next 2</a>
<a href="#" id="link3" class="hallo">Next 3</a>
<a href="#" id="link4" class="hallo">Next 4</a>
<a href="#" id="link5" class="hallo">Next Article</a>

Jquery的：

$(document).ready(function(){
    $('.hallo').click(function () {
        $(this).remove(); // remove element which is being clicked
    });
});

我们写的是每当点击具有类 hallo 的元素时，删除该元素$(this)选择器将选择当前生成事件的元素，这是我们的案例点击事件。

段：

$(document).ready(function(){
    $('.hallo').click(function () {
        $(this).remove(); // remove element which is being clicked
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="#" id="link1" class="hallo">Next 1</a>
<a href="#" id="link2" class="hallo">Next 2</a>
<a href="#" id="link3" class="hallo">Next 3</a>
<a href="#" id="link4" class="hallo">Next 4</a>
<a href="#" id="link5" class="hallo">Next Article</a>

Answer 2

我有2到4个具有相同ID的链接。

这是一个很大的问题..你的代码中不应该有重复id's。

问题：您当前的脚本$('#link').click(function () {它没有选择具有相同id的所有元素。 它只选择第一个元素，并从HTML顶部解析该ID。所以从技术上讲，事件只与第一个元素绑定。

解决方案：删除重复的ID并编写脚本以处理类hallo。使用下面的代码

$(document).ready(function(){
    $('.hallo').click(function () {
        $(this).remove();
    });
});

Answer 3

尝试这样：

使用类选择器单击而不是id。

和$(this) - 指向点击链接。

$(document).ready(function(){
	$('.hallo').click(function () {
  		$(this).remove();
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="link" class="hallo">Next 1</a>
<a href="#" id="link" class="hallo">Next 2</a>
<a href="#" id="link" class="hallo">Next 3</a>
<a href="#" id="link" class="hallo">Next 4</a>
<a href="#" id="link" class="hallo">Next Article</a>

jQuery - 单击时删除链接

3 个答案:

HTML：

Jquery的：

段：