如何删除<input />标签之间的值？

Question

我正在使用JQuery创建复选框，如下所示：

$('<input type="checkbox" ' + 'id=' + (i+1) + '>' + (i+1) + '</input><br/>')

然后，只要用户选中以下框，就会删除它：

if (this.checked) {
    $(this).remove();
}

但是，输入框已删除，但数字（id）仍保留在页面上，<br/>标记，因此我可以在HTML页面上看到#i。 我也想删除它们。 所以，为了使我的问题尽可能完整，以下是HTML的定位方式：

<input id="1" type="checkbox">
1
<br>

有人可以告诉我如何从页面中删除#i和<br/>吗？ 感谢

Answer 1

如其他答案所述 - 输入没有结束标记

您仍需要删除所有id和<br />。您可以在jquery中找到.next()函数的函数。您应将自己的ID设置为<label>或<span>。 然后。例如：

$(this).next('label').remove();
$(this).next('br').remove();
$(this).remove();

代码可以写得更短，但是你可以看看它是如何工作的。

Answer 2

那是因为input代码没有结束标记而remove忽略了>之后的所有内容，请更改此内容：

$('<input type="checkbox" ' + 'id=' + (i+1) + '>' + (i+1) + '</input><br/>')

为：

$('<input type="checkbox" ' + 'id=' + (i+1) + 'value="' + (i+1) +'"><label>'+ (i+1) +'</label>')

$(this).next('label').andSelf().remove();

Answer 3

<input> text boxes中的文字未使用textnode（例如textareas）设置，但使用value属性。 （抱歉混淆）

然而，你想要一个复选框。最好，为它创建一个<label>，而不是文本节点加上<br />（jQuery无法处理）：

<div class="inputcell">
    <input type="checkbox" id="check5">
    <label for="check5">5</label>
</div>

使用此DOM，您可以轻松地按$("#check5").parent().remove()删除整个框。请注意，单个数字不是有效的元素ID。

Answer 4

输入标记没有结束标记，要创建一个复选框，您只需要以下内容：

$('<input type="checkbox" ' + 'id=' + (i+1) + '>');

如果您还想为该复选框使用标签，请创建相应的label或任何其他元素，因为您不能将closign标记用于输入并在它们之间添加文本