JSFiddle - React, Tailwind, and code Playground

by dieuhd

HTML

<form action="" method="POST">
  <input type="text" name="keyword">
  <button class="" type="submit">Show value</button>
</form>
<div class="contents" id="list_content">

</div>

CSS

.contents {
  background-color: #c9c9c9;
  border: 1px solid #ccc;
}

.contents .item {
  display: table;
  width: 100%;
}

.contents .item .text {
  display: table-cell;
  vertical-align: middle;
}

.contents .item .action {
  width: 100px;
  vertical-align: middle;
  display: table-cell;
}

.contents .item .action .ajax_del {
  cursor: pointer;
  color: blue;
}

JavaScript

$('#search_ajax').click(function() {
  showValues();
});
$(function() {
  $('form').bind('submit', function() {
    showValues();
    return false;
  });
  $(".ajax_del").click(function() {
    //dialog confirm del function
    //alert("delete");
  });
  $(document.body).on('click', '.ajax_del', function() {
    alert("delete");
  });
});

function showValues() {
  // $('#list_content').empty(); //do someting
  $('#list_content').append($('<div class="item">' +
    '<div class="text">aaaaaa</div>' +
    '<div class="action">' +
    '<span class="ajax_del">Delete</span>' +
    '</div>' +
    '</div>'));
}