如何使用jQuery删除指定的追加SVG文本元素？

嘿，我一眼就看到问题出在哪了——你在创建SVG文本元素的时候，ID属性值里多写了一个#符号！这直接导致后续用jQuery选择器找不到对应的元素，自然删不掉。

先看你创建元素的代码：

$("#textinArea").append(parseSVG('<text x="' + xtext + '" y="' + ytext + '" id="' + '#text_chaise_' + i + '_' + j + '" font-size="55" data-access="'+access+'" font-family="Verdana" alignment-baseline="middle" text-anchor="middle" fill="Black">O</text>'));

这里生成的元素ID是#text_chaise_xxx_xxx（注意开头的#），但SVG/HTML里的ID属性值是不应该包含#的——#只是jQuery/CSS选择器里用来标识ID的前缀，不是ID本身的一部分。

正确的解决步骤： #

1. 先修正创建元素的代码，把ID里多余的#去掉：

$("#textinArea").append(parseSVG('<text x="' + xtext + '" y="' + ytext + '" id="text_chaise_' + i + '_' + j + '" font-size="55" data-access="'+access+'" font-family="Verdana" alignment-baseline="middle" text-anchor="middle" fill="Black">O</text>'));

2. 用remove()方法删除特定元素：
   你之前用的empty()只是清空元素内部的内容（比如把<text>O</text>变成空的<text></text>），但元素本身还留在DOM里。要彻底删除这个元素，应该用remove()：

$("#text_chaise_" + i + "_" + j).remove();

为什么你之前的方法无效？ #

• $("#text_chaise_" + i + "_" + j).empty();：只清空文本内容，元素本身还存在，所以看不到删除效果
• 重新append空的text元素：这是在添加新元素，不是删除原有元素，反而会多一个空元素
• $("#textinArea").closest("text_chaise_" + i + "_" + j).empty();：closest()是找当前元素的祖先节点，而目标元素是#textinArea的子元素，方向完全错了，而且选择器也没加#标识ID

特殊情况：如果不能修改创建代码 #

如果因为某些限制没法改创建逻辑，那需要转义ID里的#符号才能选中元素：

$("#\\#text_chaise_" + i + "_" + j).remove();

不过还是强烈建议修正ID的定义，符合HTML/SVG的规范，避免后续其他问题。

内容的提问来源于stack exchange，提问作者Salaheddine Zridi