Question

我有一个td，其中包含用逗号分隔的值列表（锚标记）。

有什么方法可以创建一个按钮来删除此字符串中的特定值，例如第一个，第二个或第三个值？

我首先尝试使用tagsmanager插件来解决这个问题，但我知道的所有标签管理器只能使用文本而不能使用链接/锚标签，所以上面的内容是在这里解决的。

背景是我有一个页面显示上传文件列表作为链接（用PHP创建），我想允许用户能够删除一个或多个这些链接，如果不再需要。所有链接的值是单词File和一个数字，例如文件1，文件2，文件3等。

示例td：

<td>
<a href="link1" target="_blank">File 1</a>,<a href="link2" target="_blank">File 2</a>,<a href="link3" target="_blank">File 3</a>,<a href="link4" target="_blank">File 4</a>,<a href="link5" target="_blank">File 5</a>
</td>

感谢您对此提供任何帮助，Tim。

Answer 1

您可以将td设置为具有<td id="myID">之类的ID，然后您可以使用jQuery轻松选择该td的第n个子项：

var index = 4; // or whatever you want it to be
$("#myID a:nth-child(" + index + ")").remove();

如果您不想设置td的ID，您当然可以选择另一种方式，例如使用

$("td:nth-child(" + tdNum + ")" ); // for the td
$("td:nth-child(" + tdNum + ") a:nth-child(" + linkNum + ")" ); // for the links

Answer 2

最简单的解决方案是将项目（和逗号）包装在<span>标记中：

<span class="file1"><a href="link1" target="_blank">File 1</a>,</span>
<span class="file2"><a href="link2" target="_blank">File 2</a>,</span>
<span class="file3"><a href="link3" target="_blank">File 3</a>,</span>
<span class="file4"><a href="link4" target="_blank">File 4</a>,</span>
<span class="file5"><a href="link5" target="_blank">File 5</a></span>

然后你可以简单地使用jQuery删除整个span：

$('.file1').remove();

Answer 3

我会让链接看起来像可点击的标签，点击后会自行删除。

<td>
    <a href="link1" target="_blank">File 1</a>
    <a href="link2" target="_blank">File 2</a>
    <a href="link3" target="_blank">File 3</a>
    <a href="link4" target="_blank">File 4</a>
    <a href="link5" target="_blank">File 5</a>
</td>

然后使用JavaScript在点击

上建立链接“删除”

$('a').on('click', function(e){

    this.remove(); // remove the clicked "<a>" tag

    e.preventDefault(); // prevents the link from going anywhere
})

这是 working example

here is an example ，可让您获取有关每个点击链接的详细信息，以便您可以提出删除项目的服务器端请求

Answer 4

您可以通过多种方式实现此效果。如果您想要一个单独的按钮来删除每个链接，这个可能很有用。

只需在每个链接后放置一个button，然后将click事件分配给以下内容：

$('button').click(function(){
    $(this).prev('a').remove();
    $(this).remove();
});

DEMO

jQuery：删除字符串的某些部分

4 个答案: