WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Search Tag
2796
ttmasteryi
Open In Editor
Publish Your Code
Recommended
21 August 2024
Search Input
28 July 2023
CSS Search Bar
16 February 2024
Infinite Tags Scroll
HTML
Copy
Search Tag
Search Tag
Remove All
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap'); :root{ --primary-color:#8cc84c; } *{ margin: 0; padding:0; box-sizing:border-box; } body{ font-family: 'Poppins'; background: #8cc84c; display:flex; justify-content: center; align-items: center; height:100vh; } .wrapper{ background: white; border-radius: 10px; width: 400px; padding:20px; } .title{ font-size: 22px; } .content{ border: 1px solid #888; padding: 10px; display:flex; flex-wrap: wrap; margin-top: 20px; border-radius: 5px; } .content li{ background: #8cc84c; color:white; border-radius: 3px; list-style: none; margin:4px 3px; padding:10px; } .content li i{ font-size: 16px; margin-left: 5px; cursor: pointer; } .content input{ border:none; outline: none; font-size: 20px; margin:10px; flex:1; } .remove-all{ background: var(--primary-color); border:none; outline: none; border-radius: 5px; color:white; padding: 10px 20px; font-size: 16px; margin-top:20px; cursor: pointer; transition: all 0.3s ease; } .remove-all:hover{ background: #7cac49; }
JS
Copy
var content=document.querySelector('.content') var input=document.querySelector('.content input') var btnRemoveAll=document.querySelector('.remove-all') var tags=['Nodejs', 'Reactjs'] function render(){ content.innerHTML='' for(let i=0;i<tags.length;i++){ const tag=tags[i]; content.innerHTML+= `<li> ${tag} <i class="fas fa-times" onclick="removeTag(${i})"></i> </li> ` } content.appendChild(input) input.focus() } function removeTag(index){ tags.splice(index,1) render() } render() input.addEventListener('keydown',function(event){ if(event.key =='Enter'){ console.log(); tags.push(input.value.trim()) input.value='' render() } }) btnRemoveAll.addEventListener('click',function(){ tags=[] render() })