[CSS] Clear text box button by element after
Posted: Mon Sep 25, 2017 5:51 am
css
html
js
Code: Select all
.deleteSearchBox.clear-btn::after {
content: 'x';
position: relative;
right: 105px;
cursor: pointer;
}
Code: Select all
<div class="deleteSearchBox">
<input type="text" id="search-keyword" name="keyword" class="keyword text-box">
<input type="button" id="search" value="Search" name="search" class="button-default button-save">
</div>
Code: Select all
$(".deleteSearchBox").click(function(){
$('#search-keyword').val('');
$('.deleteSearchBox').removeClass('clear-btn');
});
$('#search-keyword').keyup(function(){
if($('#search-keyword').val() !== null && $('#search-keyword').val().length > 0){
$('.deleteSearchBox').addClass('clear-btn');
}
if($('#search-keyword').val().length === 0){
$('.deleteSearchBox').removeClass('clear-btn');
}
});