如何使用CSS在动态添加项目列表之间添加逗号

在本文中，我们将使用CSS来创建一个用逗号分隔的列表。

假设你已经给出学生的姓名，并且任务是在前端以列表视图显示它们，有时你需要删除一些没有达到要求分数的学生。但是有一件事我们需要记住的是，初始时或在从列表中删除项目后，最后一个元素后不显示逗号。

方法： 我们使用JavaScript实现动态显示列表，并对CSS有更多控制。我们使用通用同级选择器来去掉末尾的逗号。使用HTML来设计列表，使用class name为students的

元素，然后创建class name为student show的 li 元素。

为给定的列表应用CSS。应用list-style: none以删除列表的默认项目符号，并设置display: flex以使列表水平显示，并通过将padding设置为0来删除填充。

现在，对student class应用通用同级选择器以选择第一个student元素之后的所有.student元素，并使用::before伪元素添加一个空格和逗号。

HTML

<ul class="students"> 
    <!--List of students with class -->
    <li class="student show">John</li> 
    <li class="student show">Peter</li> 
    <li class="student show">Mark</li> 
    <li class="student show">Bill</li> 
    <li class="student show">Jack</li> 
</ul>

CSS

.students{ 
  display: flex;  
  list-style: none;  
  padding: 0; 
} 
.student ~ .student::before{ 
  content: ", "; 
}

输出：

John, Peter, Mark, Bill, Jack

添加一些JavaScript代码来从列表中移除项目。添加一些按钮来触发按需的JavaScript代码。

添加逻辑来添加/移除列表中的项目。我们已经创建了两个函数，第一个函数可以在特定位置移除项目，第二个函数可以在特定位置添加元素。

HTML设计：

HTML

<ul class="students"> 
    <li class="student show">John</li> 
    <li class="student show">Peter</li> 
    <li class="student show">Mark</li> 
    <li class="student show">Bill</li> 
    <li class="student show">Jack</li> 
</ul> 
  
<button onclick="removeItem('first')">Remove first</button> 
<button onclick="removeItem('last')">Remove last</button> 
<button onclick="removeItem('random')">Remove Random</button> 
<br><br> 
<button onclick="addItem('first')">Add first</button> 
<button onclick="addItem('last')">Add last</button> 
<button onclick="addItem('random')">Add Random</button>

JavaScript

let student = document.querySelectorAll(".student") 
  
// Removes items for a particular position 
function removeItem(position) { 
  
    // It removes 0th index value to remove first 
    if (position == "first") { 
        student[0].remove() 
    } 
      
    // It removes (Length of the array - 1) index 
    // value to remove last element 
    if (position == "last") { 
        student[student.length - 1].remove() 
    } 
    // to remove random, it uses the random() method 
    if (position == "random") { 
        student[(Math.floor( 
            Math.random() * student.length))].remove() 
    } 
} 
  
let list = document.querySelector(".students") 
  
// Adds element at specific position 
function addItem(position) { 
  
    let item = document.createElement("li") 
    item.innerText = "Added Item"
    item.className = "student"
  
    // To add item in the first insert is  
    // performed before the 0th index 
    if (position == "first") { 
        list.insertBefore(item, list.childNodes[0]) 
    } 
  
    // To add item in the last insert is performed  
    // before the (array length - 1) index 
    if (position == "last") { 
        list.insertBefore(item,  
            list.childNodes[list.children.length - 1]) 
    } 
  
    // Random() method is used to insert below 
    if (position == "random") { 
        list.insertBefore 
            (item, list.childNodes[(Math.floor( 
                Math.random() * list.children.length))]) 
    } 
}

输出： 点击这里查看实时代码输出

如何使用CSS在动态添加项目列表之间添加逗号