Question

与this thread类似，我正在尝试为文档的不同部分添加和删除选择框。但是，当我调用remove函数时，它会删除克隆对象的第一个实例，而不是最后一个实例。我尝试过使用：last和：last-child，但它们似乎没有工作（可能只是语法错误，因为我是Javascript / Jquery的新手）

另外，我应该为每个克隆对象分配不同的ID吗？我的目标是每个g：select选择一个数据库对象，并将所有不同的对象文本编译成一个大字符串（每个对象都有一个我要编译的＆＃39; documentBody＆＃39;字段）。由于我基本上对每个对象做同样的事情，我是否有必要为每个选择分配特定的id，或者只是克隆它们就足够了？

以下是我目前实施的内容

        <div id="selects">
        <g:select name="intro" 
        id= "intro" from="${package.name.Subtag.findAllWhere(tag: package.name.Tag.get(2))}" noSelection="['': 'Please choose Subtag']"/>
        </div>

        <button onclick="addSelect()">Add</button> 
        <button onclick="removeSelect(intro)">Remove</button>

和

    <g:javascript library="jquery"/>
    <g:javascript>
            function addSelect(){
            var cloner = $("#intro").clone();
             $("#selects").append(cloner);

        }
            function removeSelect(id){
                $("#intro:last-child").remove();

        }

    </g:javascript>

Answer 1

正如Jai所提到的，问题是您正在克隆并附加带有id的元素，从而在页面上创建重复的ID。当jQuery按id搜索元素时，它会在找到的第一个元素处停止，而不管其他任何伪类。

问题是页面上的重复ID意味着HTML文档无效，因此所有投注均已关闭。较旧的浏览器甚至可能会抛出错误。使用类而不是id会阻止.clone()函数复制dupe id，但是如果您仍然需要第一个元素的id，则可以始终将其从克隆对象中删除，然后再将其附加到页面：

cloner.removeAttr('id');

删除最后克隆的元素

1 个答案: