kenvantruong
5/19/2018 - 2:50 PM

Add | Delete | Filter with Javascript

Add | Delete | Filter with Javascript

Add Delete Filter with Javascript.html
content_copyfile_download
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <title>Item Lister</title>
</head>
<body>
    <header id="main-header" class="bg-success text-white p-4 mb-3">
        <div class="container">
          <div class="row">
            <div class="col-md-6">
                <h1 id="header-title">Item Lister</h1>
            </div>
            <div class="col-md-6 align-self-center">
                <input type="text" class="form-control" id="filter" placeholder="Search Items...">
            </div>
          </div>
        </div>
      </header>
      <div class="container">
       <div id="main" class="card card-body">
        <h2 class="title">Add Items</h2>
        <form id="addForm" class="form-inline mb-3">
          <input type="text" class="form-control mr-2" id="item">
          <input type="submit" class="btn btn-dark" value="Submit">
        </form>
        <h2 class="title">Items</h2>
        <ul id="items" class="list-group">
          <li class="list-group-item">Item 1 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
          <li class="list-group-item">Item 2 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
          <li class="list-group-item">Item 3 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
          <li class="list-group-item">Item 4 <button class="btn btn-danger btn-sm float-right delete">X</button></li>
        </ul>
       </div>
      </div>

</body>



<!--//////////////////////////////////////////////////////////-->
<!--JAVASCRIPT BELOW-->
<!--//////////////////////////////////////////////////////////-->



<script>

//-------Variables for Buttons [id of 'addForm', 'items']-------

var form = document.getElementById('addForm'); // - Var Button
var itemList = document.getElementById('items');// var list area

form.addEventListener('submit', addItem); // listen for submit button

//---------Function for Add Buttons-----------

function addItem(e){ // add button functionality
  e.preventDefault(); // reset button to original

  var item = document.getElementById('item').value;//record user input

  var li = document.createElement('li');//create <li></li>
  li.className = 'list-group-item';// add class to li

  li.appendChild(document.createTextNode(item));//LI & Text together


//---------Create Delete button-----------
var btnDelete = document.createElement('button');

//add class to button
btnDelete.className = 'btn btn-danger btn-sm float-right delete';

//mix btn to text
btnDelete.appendChild(document.createTextNode('X'));

//mix li to btn
li.appendChild(btnDelete);

  itemList.appendChild(li);// add everything from li to itemlist

}

//---------Remove Item with Button-----------
//addEventListener
itemList.addEventListener('click', removeItem);

//function removeItem using e.target classList contains
function removeItem(e){
  if(e.target.classList.contains('delete')){
    if(confirm('Are you sure?')){
      var li = e.target.parentElement;
      itemList.removeChild(li);
    }
  }
}


//---------Filter Button [id of 'filter']-----------
var filter = document.getElementById('filter');
filter.addEventListener('keyup', filterItems);

function filterItems(e){
  var text = e.target.value.toLowerCase();
  var items = itemList.getElementsByTagName('li');
  Array.from(items).forEach(function(item){
    var itemName = item.firstChild.textContent;
    if(itemName.toLowerCase().indexOf(text) != -1){
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
}






</script>