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>'));
}