如何使用jQuery删除变量中的选项标签？

Posted 2023-03-05

【中文标题】如何使用jQuery删除变量中的选项标签？

【英文标题】：How to delete an option tag in a variable with jQuery?

【发布时间】：2012-07-31 06:36:16

【问题描述】：

删除 DOM 中的选项标记对我来说不是问题，但现在我必须删除变量中的选项标记。这就是我所拥有的：

var txt = "<select name='example'><option value='1'>Test</option></select>";
$(txt).find("select option[value='" + $(this).attr("id") + "']").remove();

选择器似乎是正确的，我已经用 text() 对其进行了调试，它给了我正确的值。但是变量 txt 没有改变——我做错了什么？

【问题讨论】：

除其他问题外，$(text)中选中的元素是select，没有select元素有后代，所以.find()没有找到任何元素。

你不需要在find调用中定义select，因为jQuery对象就是select对象。

【参考方案1】：

您不应该在选择器中使用select。你必须先使用$() 使它成为一个jQuery 对象。之后你就可以操作它了。

var txt = "<select name='example'><option value='1'>Test</option></select>",
    $txt = $(txt);
$txt.find("option[value='" + $(this).attr("id") + "']").remove();

【参考方案2】：

首先创建一个 jQuery 选择器，这样您就不必不断地将其重新转换为一个。

在您的 find 中，您也不需要再次指定 select，因为您在 select 上执行 .find()。

为简单起见，我将.find() 的结果缓存到另一个选择器变量中，然后再将其删除。

以下工作正常。好吧，如果我使用 1 而不是 $(this).attr("id") 效果很好，因为我不知道您使用 $(this) 指的是什么。

var $txt = $("<select name='example'><option value='1'>Test</option></select>");
//var $option = $txt.find("option[value='" + $(this).attr("id") + "']");
var $option = $txt.find("option[value='" + 1 + "']"); // selects option with value of 1
$option.remove(); // Removes option

工作DEMO

【参考方案3】：

如果您期望 txt 的值不会改变它 - jQuery 不会改变它（它不能；它是按值传递，而不是引用传递），它只会从它并删除该选项。不过，没有什么永久性的事情发生。

如果您想检索受影响的结果，您需要将整个内容放在容器中并读回其 html：

var txt = "<p>this is a HTML <span>string</span></p>";
txt = $('<div />').append(txt).find('span').remove().end().html();

txt 现在已删除 span。

【参考方案4】：

您从一个包含一些 HTML 的字符串开始，该字符串存储在您的 txt 变量中。当您调用$(txt) 时，您正在创建一个包含该HTML 字符串中定义的元素的jQuery 对象，该对象与您的txt 变量完全分开。然后您可以操作（在本例中尝试删除）元素，但由于它与 txt 完全分离，因此更改不会反映在其中。

如果您想将 txt 的值更改为其他值，您需要将该值重新分配给它，可能像这样（您提到调用 .text() 给了您期望/想要的见）：

txt = $(txt).find("select option[value='" + $(this).attr("id") + "']").remove().text();

【讨论】：

感谢您的回答。您的解决方案结果只是选项标签的值，这是我之前测试过的解决方案之一。

【参考方案5】：

没什么，txt 仍然只是一个String。我猜你希望 DOM sn-p 在一个变量中，这将是：

var txt = "<select name='example'><option value='1'>Test</option></select>";
var $domSnippet=$(txt);
domSnippet.find("select option[value='" + $(this).attr("id") + "']").remove();

【讨论】：

那不行，因为select是被选中的元素，它没有select的后代。

【参考方案6】：

remove() 方法删除元素 - 所以它们必须在 DOM 中，因为 txt 是一个变量，它没有在 DOM 中表示，值只是一个 string 。你应该使用像 replace() 这样的东西。

var txt = "<select name='example'><option value='1'>Test</option></select>";
        txt=txt.replace("<select name='example'><option value='1'>Test</option></select>","replacedText");