删除最后一个克隆的元素

Question

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

另外，我应该为每个克隆对象分配不同的 ID 吗？我的目标是让每个 g:select 选择一个数据库对象，并将所有不同的对象文本编译成 1 个大字符串（每个对象都有一个我要编译的“documentBody”字段）。由于我基本上对每个对象做同样的事情，我是否有必要为每个选择分配特定的 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() 函数复制欺骗 id，但如果您仍然需要第一个元素的 id，您始终可以在将其附加到页面之前将其从克隆对象中删除：

cloner.removeAttr('id');