如何在 javascript 中逐一定位附加项目？

Question

我创建了一个类似于网络浏览器的简单新标签页，但是当我创建一个新标签页并按 x 图标触发 closetab() 时，它会关闭所有标签页并且不会按顺序逐一删除它们。如何使每个附加项都独一无二？

JS:

function addTab() {
    
        var img = document.createElement("img");
        img.src = "resources/img/delete-icon.svg";
    
        img.className = 'deleteicon';
        img.id = "deletetab";
        img.onclick = closeTab;
    
        var ulLocation = document.getElementsByClassName('abc')[0];
        var whereTab = document.getElementById('listid');
    
        var addTab = document.createElement('li');
        addTab.className = 'first-tab';
        addTab.id = "listid";
    
        addTab.className = 'active';
      
        addTab.innerHTML = "mozilla-firefox/newtab";
        addTab.appendChild(img2);
    
        ulLocation.appendChild(addTab);
    
        addTab.appendChild(img);
    }

function closeTab() {
    var whereTab = document.getElementById('listid');
    if (whereTab.style.display == 'block') {
        whereTab.style.display = 'none';
    } else {
        whereTab.style.display = "none";
    }
}

Answer 1

您至少有 2 个选项。一种是定位活动选项卡并在单击 X 时将其关闭。这是假设您一次只有一个活动选项卡（例如用 active class 表示）。

function closeTab(event) {
   document.querySelector('li.tab.active').remove();
}

另一种选择是引用与关闭图标相关的选项卡，您可以在点击侦听器的 event 参数中引用它。由于您是动态添加这些内容，因此您可以通过单击删除而不是隐藏来删除它们。类似于：

function closeTab(event) {
   event.target.closest('li.tab').remove();
}

在这些示例中，您已将选项卡容器的 class名称设置为 tab

如何在 javascript 中逐一定位附加项目？

How can i target appended items one by one in javascript?

html

javascript

arrays

loops

append