如何使用 Javascript 将实例添加到实例化对象？

Question

我正在尝试创建一个简单的 chrome 扩展，我想实例化类似 Trello 的列表。事实证明这是成功的，因为我很容易找到一种方法来实例化它。但是，我想创建一个删除按钮，当我实例化它们时，它们只停留在第一个实例化对象上。我考虑过每次都使用列表或变量来更改 id，但我认为这会使事情变得更复杂。我该如何解决这个问题？

代码：

popup.html

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <link rel="stylesheet" href="popup.css">
        <meta charset="UTF-8">
        <title>Esse</title>
    </head>
    <body>
         <script type="text/javascript"                     src="popup.js"></script> 
        <h1 class="logo">Esse</h1>
        <p class="by">by</p> 
        <p class = "Minim">Minim</p>
     <!--   <img src="images/logo_transparent.png"   width="60" height="60" class="studiologo"> -->
        <div class="container" id="container">
            <ul class="hwcontainer" id="Lcontainer">
                <li><input type="button" id="button"    value="+" class="addlist" /></li>
            </ul>
        </div>

    </body>
</html>

Javascript:

var listnum = 0;
var butadd = 250;
var numadd = 360; 

document.addEventListener('DOMContentLoaded' ,addList, false);

function addList()
{
    var btn = document.getElementById('button');
    btn.addEventListener('click', function()
    {
        var new_list = document.createElement('DIV');
        new_list.innerHTML = "CLICK";
        new_list.className = "list";
        new_list.id = 'newList';

        var delete_list =   document.createElement('BUTTON');
        delete_list.className = "delList";
        listnum++;
        extendCont()
        document.getElementById('Lcontainer').appendChild(new_list            );
        document.getElementById('newList').appendChild(delete_list);
}, false);
}

function extendCont(){
    if (listnum >= 5)
    {
    document.getElementById("container").setAttribute("style", 'height: '+numadd+'px');
    document.getElementById('button').setAttribute("style", "top:"+ butadd + 'px');
    numadd += 60;
    butadd += 60;
    }
}

Answer 1

元素 ID 在整个文档中必须是唯一的。

您的所有列表都获得相同的 ID“newList”。

当您尝试添加按钮时 document.getElementById('newList') 将始终 return 第一个列表。

您可以通过分配唯一的元素 ID 来解决这个问题。您可以为此使用一个计数器（就像您已经拥有的那样）：

new_list.id = 'newList' + listnum;

如何使用 Javascript 将实例添加到实例化对象？

How do you add an instance to an instanced object using Javascript?

html

javascript

google-chrome

google-chrome-extension