jQuery 添加和删除文本框答案

【问题标题】：jQuery add & remove textboxjQuery 添加和删除文本框
【发布时间】：2011-06-15 17:28:32
【问题描述】：

我有这组 html 代码，我想在单击“+”时附加另一个 input="text" 以增加文本框的数量，但我不确定 parent().parent() 函数。有人可以帮忙吗？

here 是我的 jquery 和 html 提取，抱歉，由于没有 css，它们看起来有点乱。

【问题讨论】：

【解决方案1】：

我认为.append() 会帮助您添加元素并.remove() 删除它们（请参阅example #1 和example #2）。

因此，element.append(content); 将content 添加到element HTML 的末尾（在其结束标记之前）。 element.remove(); 将 element 从它所在的位置删除，因此您应该将它用于带有 $("your_tr > td > label :last") 选择器的“减号”按钮（选择输入来自 your_tr 的最后一个标签）。

【讨论】：

嗨，您的 append() 有效，但我需要保持我的逻辑，确保至少有 1 个文本框和最多 5 个文本框。我当前的代码允许这样做，但是您的代码只是简单地输入文本而不考虑我的逻辑。无论如何，您是否操纵 parent().parent() 以到达输入文本？
在选择器上使用 .length 属性：if ($("[name=moo] > td > label").length < 5) ...。这是一个例子：jsfiddle.net/2XJXu/12 .

【解决方案2】：

您是否尝试过提供父级和 id 并通过它来引用它，您也可以使用 clone 直接复制输入标签，记住在将其附加到父级之前更改克隆的 id也会被克隆。

【讨论】：

【解决方案3】：

这里有几个修改...

HTML：

<td colspan="2" id="tasklist">
    <label>
        <input type="text" value="Create a task for this iteration" size="75%" height="25px"/>
    </label>
</td>

JavaScript：

$("#tasklist").append('<input type="text" value="Create a task for this iteration" />');

补充说明

您的标签中没有文字。标签的想法是它可以通过描述需要在文本框中输入的内容来帮助用户。如果你不想要一个可见的标签，你可以选择用 CSS 隐藏它——但你仍然应该有一个

输入任务名称

不想展示它？用 CSS 隐藏它：

label {
    display: none;
}

表格不应用于布局
尝试将您的 HTML 属性移动到 CSS 中

希望这会有所帮助。

【讨论】：