Add and remove tags functionality using CSS and javascript

Managing tags and chips is required in some web projects. You can easily create adding and removing tags functionality using CSS and javascript. The basic functionalities that we will develop here as tag management are as below:

1. Create a text field where you can type some text as tag text.

2. On the input text field enter keypress append tag text into the tag list. This will create a chip along with a remove icon.

3. On remove icon click - remove the tag chip from the tag list.

4. Append some tag chips on page load if we want to fill some tags.

To create the above functionalities we can use below code blocks of HTML, CSS, and javascript. We are developing the chip management functionality without any Javascript framework. We are using vanilla Javascript to make the core functionalities.

HTML Code

We need some HTML code that contains div, ul, li, span, input tags to make the basic structure of add and remove tags management. Below is the HTML code that we are using.

<div class="tag_wrap">
    <div class="hd">Add and remove tags</div>
    <ul id="tags_list" class="tags_list"></ul>
    <input type="text" id="tag_txt" placeholder="Type and enter ...">
</div>

Here, we have created a tag_wrap class container that contains all of our HTML code that is needed to create the UI of add and remove tags functionality.

Inside tag_wrap class div we have tags_list ul HTML tag that will contain tag chips that are created dynamically. All the newly generated tag chips will append inside this unordered list.

There is also an input text field that has id tag_txt and we will write tag text inside it and when we press enter inside this text field, the tag text will append inside tags_list.

CSS Code

The CSS code that is required to create add and remove tag functionality is as below.

body {
  font-family: 'Helvetica';
  font-size: 13px;
  background: #ddd;
}
.tag_wrap {
  width: 500px;
  padding: 15px 15px 10px 15px;
  border-radius: 7px;
  border: 1px solid #ccc;
  background: #fff;
  margin: 50px;
}
.tag_wrap .hd {
  margin-bottom: 15px;
  font-size: 17px;
}
.tag_wrap input {
  border: 0px;
  background: none;
  margin-bottom: 5px;
  display: inline-block;
  outline: 0;
}
ul.tags_list {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: inline;
}
ul.tags_list li {
  display: inline-block;
  background: #4769e7;
  color: #fff;
  padding: 9px 12px 9px 17px;
  border-radius: 20px;
  margin-right: 5px;
  margin-bottom: 5px;
}
ul.tags_list li .remove {
  color: #fff;
  text-decoration: none;
  margin-left: 8px;
  font-size: 10px;
  background: #2c23af;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .7;
}
ul.tags_list li .remove:hover {
  opacity: 1;
}

Javascript Code

The Javascript code that is required to develop the functionality is as below

var tag_txt = document.getElementById('tag_txt');
var tags_list = document.getElementById('tags_list');
var tag_items = ['Devsheet', 'Lotis'];

tag_txt.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    let value = tag_txt.value;
    if (value !== '') {
      if (tag_items.indexOf(value) >= 0) {
        alert('Tag already added');
      } else {
        tag_items.push(value);
        append_tags();
        tag_txt.value = '';
        tag_txt.focus();
      }
    } else {
      alert('Please enter a tag Name');
    }
  }
});

function append_tags() {
  tags_list.innerHTML = '';
  tag_items.map((item, index) => {
    tags_list.innerHTML += `<li><span>${item}</span><span class="remove" onclick="javascript: remove(${index})">X</span></li>`;
  });
}

function remove(i) {
  tag_items = tag_items.filter(item => tag_items.indexOf(item) != i);
  append_tags();
}

window.onload = function() {
  append_tags();
  tag_txt.focus();
}

Live Demo

Full Code

Below is the full code that can be used to develop add and remove tag functionality using CSS and Javascript.

<div class="tag_wrap">
  <div class="hd">Add and remove tags</div>
  <ul id="tags_list" class="tags_list"></ul>
  <input type="text" id="tag_txt" placeholder="Type and enter ...">
</div>

<style>
body {
  font-family: 'Helvetica';
  font-size: 13px;
  background: #ddd;
}
.tag_wrap {
  width: 500px;
  padding: 15px 15px 10px 15px;
  border-radius: 7px;
  border: 1px solid #ccc;
  background: #fff;
  margin: 50px;
}
.tag_wrap .hd {
  margin-bottom: 15px;
  font-size: 17px;
}
.tag_wrap input {
  border: 0px;
  background: none;
  margin-bottom: 5px;
  display: inline-block;
  outline: 0;
}
ul.tags_list {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: inline;
}
ul.tags_list li {
  display: inline-block;
  background: #4769e7;
  color: #fff;
  padding: 9px 12px 9px 17px;
  border-radius: 20px;
  margin-right: 5px;
  margin-bottom: 5px;
}
ul.tags_list li .remove {
  color: #fff;
  text-decoration: none;
  margin-left: 8px;
  font-size: 10px;
  background: #2c23af;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .7;
}
ul.tags_list li .remove:hover {
  opacity: 1;
}
</style>

<script>
var tag_txt = document.getElementById('tag_txt');
var tags_list = document.getElementById('tags_list');
var tag_items = ['Devsheet', 'Lotis'];

tag_txt.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    let value = tag_txt.value;
    if (value !== '') {
      if (tag_items.indexOf(value) >= 0) {
        alert('Tag already added');
      } else {
        tag_items.push(value);
        append_tags();
        tag_txt.value = '';
        tag_txt.focus();
      }
    } else {
      alert('Please enter a tag Name');
    }
  }
});

function append_tags() {
  tags_list.innerHTML = '';
  tag_items.map((item, index) => {
    tags_list.innerHTML += `<li><span>${item}</span><span class="remove" onclick="javascript: remove(${index})">X</span></li>`;
  });
}

function remove(i) {
  tag_items = tag_items.filter(item => tag_items.indexOf(item) != i);
  append_tags();
}

window.onload = function() {
  append_tags();
  tag_txt.focus();
}
</script>