如何使用CSS在项目列表项之间动态添加逗号
在本文中,我们将使用CSS创建一个以逗号分隔的列表。
假设您已经给出了学生的姓名,并且任务是在前端以列表视图显示它们,并且有时必须删除一些没有达到所需分数的学生。但是,有一点我们必须记住,即在初始状态下或在从列表中删除项目后,最后一个元素之后不显示逗号。
方法: 我们使用JavaScript实现动态显示列表,并对CSS进行更多的控制。我们使用一般兄弟选择器来消除末尾的逗号。使用HTML设计列表,使用类名为students的ul,然后创建使用类名为student show的li元素。
将CSS应用于给定的列表。将list-style:none应用于列表以删除默认的项目符号,并使用display:flex将列表设置为水平显示,并通过将padding设置为零来删除填充。
现在将一般兄弟选择器应用于student类,以选择第一个student元素之后的所有.student元素,然后使用::before伪元素分配一个空格后跟逗号。
输出:
添加一些JavaScript代码以从列表中删除项目。添加触发按需JavaScript代码的按钮。
添加逻辑以添加/删除列表中的项目。我们创建了两个函数,第一个函数是以特定位置删除项目,第二个函数是在特定位置添加元素。
HTML设计:
输出: 点击此处查看代码输出
阅读更多:JavaScript 教程