jQuery

Question

我有 2 到 4 个 links 具有相同的 IDs。

这是我的代码：

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

我想要实现的是在 clicked 时 remove link。例如：当 link 和文本 Next 2 被点击时我想删除那个 link.

我试过这个：

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

但它只删除第一个 link (Next 1) 而不是其他的。

$(document).ready(function(){
 $('#link').click(function () {
    $('#link').closest('a.hallo').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>

Answer 1

首先，id 必须在 html 中的元素中是唯一的，其次，您以具有 id 的元素为目标，因此每次找到具有 id link 的第一个元素时都会被选中向上，你需要使用 class 属性和选择器。

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
    });
});

我们所写的是，每当单击具有 class 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

I have 2 to 4 links with same IDs.

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

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

解决方案： 删除重复的 ID 并编写脚本以在 class hallo 上运行。使用下面的代码

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

Answer 3

这样试试：

对点击使用 class 选择器而不是 id。

和 $(this) - 指向点击的 link。

$(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 - 单击时删除 Link

jQuery - Remove Link when clicked

hyperlink

closest

HTML:

Jquery:

片段：