Skip to content
Related Articles

Related Articles

Improve Article

How to Add Commas Between a List of Items Dynamically with CSS ?

  • Last Updated : 24 Jun, 2021

In this article, we are going to create a list that is separated with commas using CSS.

Suppose you have given the name of the students and the task is to show them on the frontend in a list view, and sometimes you have to remove some of the students who did not get the required marks. But one thing we have to keep in mind is we have to display no comma after the last element initially or after removing the items from the list. 

Approach: We use JavaScript to make the list display dynamically and getting more control over the CSS. We use the general sibling selector to get rid of the comma at the end. Design the list using HTML ul using class name as students and then create li elements with class name student show.

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>

Apply the CSS to the given list. Apply list-style : none to remove the default bullets from the list and then set the display: flex to make the list horizontal and remove the padding by setting it to zero.

Now apply the general sibling selector on student class to select all the .student elements after the first .student element and then by using the :: before pseudo-element assigning a space followed by a comma.



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

Output:

John, Peter, Mark, Bill, Jack

Add some JavaScript code to remove items from the list. Add some buttons that trigger the on-demand JavaScript codes.

HTML design:

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>

Add logic to add/remove items from the list. We have created two functions, the first one removes the items at a specific position and the second one adds elements at the specific position.

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

Final code:

HTML




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

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :