JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-group">
  <div class="row">
    <div class="col-xs-10">
      <label for="exemplo">Exemplo</label>
      <input type="input" class="form-control" id="exemplo">
    </div>
    <div class="col-xs-2">
      <button class="add-item">Add</button>
    </div>
  </div>

  <ul class="list-group">
    <li class="list-group-item"><span>Cras justo odio</span> <a href="#" class="edit-item">editar</a> | <a href="#" class="rm-item">X</a></li>
    <li class="list-group-item"><span>Cras blah blag</span> <a href="#" class="edit-item">editar</a> | <a href="#" class="rm-item">X</a></li>
    <li class="list-group-item"><span>Going goind gone</span> <a href="#" class="edit-item">editar</a> | <a href="#" class="rm-item">X</a></li>
  </ul>
</div>

JavaScript

function addItem(group) {
  var newItem = group.find('input').val(),
    list = group.find('.list-group'),
    layoutItem = '<li class="list-group-item"><span>' + newItem + '</span> <a href="#" class="edit-item">editar</a> | <a href="#" class="rm-item">X</a></li>';

  list.prepend(layoutItem);
}

function removeItem(item) {
  item.remove();
}

function saveEditItem(group) {
  var editItem = group.find('input'),
    backList = group.find('.editing').find('span');

  backList.text(editItem.val());
  group.find('.editing').removeClass('editing');
  editItem.val('');
}

function editItem(group, item) {
  group.find('input').val(item.find('span').text()).focus();
}


//
$(function() {

  $(document).on('click', '.add-item', function(e) {
    e.preventDefault();

    var group = $(this).closest('.form-group');

    if (group.find('.editing').length) {
      saveEditItem(group);
    } else {
      addItem(group);
    }
  });

  $(document).on('click', '.rm-item', function(e) {
    e.preventDefault();

    var item = $(this).closest('.list-group-item');

    removeItem(item);
  });

  $(document).on('click', '.edit-item', function(e) {
    e.preventDefault();

    var group = $(this).closest('.form-group'),
      item = $(this).closest('.list-group-item');

    item.addClass('editing')

    editItem(group, item);
  });


});