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

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

假设您已经给出了学生的姓名，并且任务是以列表视图的形式在前端显示他们，有时您必须删除一些没有获得所需分数的学生。但是我们必须记住的一件事是，我们必须在最初的最后一个元素后或从列表中删除项目后不显示逗号。

方法：我们使用 JavaScript 使列表动态显示并获得对 CSS 的更多控制。我们使用通用的兄弟选择器来去掉末尾的逗号。使用 HTML ul设计列表，使用班级名称作为学生，然后创建班级名称为student show 的li 元素。

HTML

      
    
    
John
    
Peter
    
Mark
    
Bill
    
Jack

将 CSS 应用于给定的列表。申请 list-style : none从列表中删除默认项目符号，然后设置display : flex使列表水平并通过将其设置为零来删除填充。

现在在 student类上应用通用同级选择器来选择第一个.student元素之后的所有 .student元素，然后使用:: before伪元素分配一个空格，后跟一个逗号。

输出：

John, Peter, Mark, Bill, Jack

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

HTML 设计：

HTML

    
John
    
Peter
    
Mark
    
Bill
    
Jack

  
Remove first
Remove last
Remove Random



Add first
Add last
Add Random

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

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)])
    }
}

最终代码：

HTML

  

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

  

    
        John
        Peter
        Mark
        Bill
        Jack
    
  
    Add first
    Add last
    Add Random
    
    Remove first
    Remove last
    Remove Random
  
  
    
        function removeItem(position) {
            let student = document.querySelectorAll(".student")
  
            if (position == "first") {
                student[0].remove()
            }
            if (position == "last") {
                student[student.length - 1].remove()
            }
  
            if (position == "random") {
                student[Math.floor(Math.random() 
                    * student.length)].remove()
            }
        }
  
        let list = document.querySelector(".students")
        function addItem(position) {
  
            let item = document.createElement("li")
            item.innerText = "Added Item"
            item.className = "student"
  
            if (position == "first") {
                item.innerText = "Added at First"
                list.insertBefore(item, list.childNodes[0])
            }
            if (position == "last") {
                item.innerText = "Added at Last"
                list.appendChild(item)
            }
            if (position == "random") {
                item.innerText = "Added at random"
                list.insertBefore
                    (item, list.childNodes[Math.floor(
                        Math.random() * list.children.length)])
            }
        }
    

  

输出：