¿Cómo agregar comas entre una lista de elementos dinámicamente con CSS?

En este artículo, vamos a crear una lista separada por comas usando CSS.

Suponga que ha dado el nombre de los estudiantes y la tarea es mostrarlos en la interfaz en una vista de lista y, a veces, tiene que eliminar a algunos de los estudiantes que no obtuvieron las calificaciones requeridas. Pero una cosa que debemos tener en cuenta es que no debemos mostrar una coma después del último elemento inicialmente o después de eliminar los elementos de la lista. 

Enfoque: Usamos JavaScript para hacer que la lista se muestre dinámicamente y obtener más control sobre el CSS. Usamos el selector general de hermanos para deshacernos de la coma al final. Diseñe la lista usando HTML ul usando el nombre de la clase como estudiantes y luego cree elementos li con el nombre de la clase show de estudiantes.

<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>

Aplicar el CSS a la lista dada. Aplicar estilo de lista : ninguno para eliminar las viñetas predeterminadas de la lista y luego configurar la pantalla : flex para hacer que la lista sea horizontal y eliminar el relleno configurándolo en cero.

Ahora aplique el selector general de hermanos en la clase de estudiante para seleccionar todos los elementos .student después del primer elemento .student y luego use el :: antes del pseudo-elemento asignando un espacio seguido de una coma.

<style>
    .students{
        display: flex; // Horizontal display
        list-style: none; // Removes bullets
        padding: 0;
    }
    // Used to add styles before the li element
    .student ~ .student::before{
        content: ", ";
    }
</style>

Producción:

John, Peter, Mark, Bill, Jack

Agregue código JavaScript para eliminar elementos de la lista. Agregue algunos botones que activan los códigos JavaScript a pedido.

Diseño 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>

Agregue lógica para agregar/eliminar elementos de la lista. Hemos creado dos funciones, la primera elimina los elementos en una posición específica y la segunda agrega elementos en la posición específica.

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

código final:

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  
    <style>
        .students {
            display: flex;
            list-style: none;
            padding: 0;
            flex-wrap: wrap
        }
  
        .student~.student::before {
            content: ", ";
        }
    </style>
</head>
  
<body>
    <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="addItem('first')">Add first</button>
    <button onclick="addItem('last')">Add last</button>
    <button onclick="addItem('random')">Add Random</button>
    <br><br>
    <button onclick="removeItem('first')">Remove first</button>
    <button onclick="removeItem('last')">Remove last</button>
    <button onclick="removeItem('random')">Remove Random</button>
  
  
    <script>
        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)])
            }
        }
    </script>
</body>
  
</html>

Producción: