添加、删除和重命名输入 jQuery答案

【问题标题】：Add, remove and rename input jQuery添加、删除和重命名输入 jQuery
【发布时间】：2014-01-29 17:30:34
【问题描述】：

我在互联网上获取了下面的代码，但我不知道如何自动添加或删除输入时输入的重命名。

html

<input type="text" value="" id="qta_alternativas" size="4" /><div id="div_01"><a href="#" id="add">Adicionar</a></div>
        <div id="div_03">
          <div id="p_scents">
            <p>
              <input type="text" id="p_scnt" size="50" name="opcao_1" />
            </p>
          </div>
        </div>

jQuery

    $(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#add').live('click', function() {
            $('<p><input type="text" id="p_scnt" size="50" name="opcao_' + i +'" /><a href="#" id="remove_opcao">Remover</a></p>').appendTo(scntDiv);
            i++;
            document.getElementById('qta_alternativas').value = i-1;
            return false;
    });

    $('#remove_opcao').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
                    document.getElementById('qta_alternativas').value = i-1;
            }
            return false;
    });

    $("input[name^=opcao_]").each(function(index) {
        this.name = "opcao_" + index;
    });

});

例子：

<input type="text" id="p_scnt" size="50" name="opcao_1" />
<input type="text" id="p_scnt" size="50" name="opcao_2" />
<input type="text" id="p_scnt" size="50" name="opcao_3" />
<input type="text" id="p_scnt" size="50" name="opcao_4" />

如果我删除输入 name="opcao_3"，我的代码会变成这样：

<input type="text" id="p_scnt" size="50" name="opcao_1" />
<input type="text" id="p_scnt" size="50" name="opcao_2" />
<input type="text" id="p_scnt" size="50" name="opcao_4" />

但我想当我删除我的代码时得到这样的：

<input type="text" id="p_scnt" size="50" name="opcao_1" />
<input type="text" id="p_scnt" size="50" name="opcao_2" />
<input type="text" id="p_scnt" size="50" name="opcao_3" />

我该怎么做？！有人可以帮助我吗？

谢谢！！

【问题讨论】：

向我们展示您必须删除输入的功能。它只需要稍微修改即可重命名其余的。此外，您不应该有具有相同 ID 的元素。这应该改变。
你的 JavaScript 代码在哪里？
仅供参考，id 应该是唯一的
为什么不直接删除 opcao_4 ？

标签： jquery html input add rename

【解决方案1】：

将此代码添加到删除点击处理程序的末尾...

$("input[name^=opcao_]").each(function(index) {
    this.name = "opcao_" + index;
});

它将遍历所有具有以“opcao_”开头的名称属性的输入，并使用索引对其进行重命名。

【讨论】：

它不起作用:(我以前也试过，但我不知道为什么它不起作用
直到你摆脱了所有重复的 ID（我怀疑还有比我们上面看到的更多），那么你就会遇到问题。该代码将完全按照您的要求执行，因此如果它不起作用，那么其他地方就会出现问题。您是否在控制台中遇到任何错误？

【解决方案2】：

我将此代码添加到我的代码中......它正在工作！

$(document).delegate('a','click',function()
{
    $( this ).parent('p').remove();
});

【讨论】：