Pencarian dengan tombol bersihkan

HTML

<form id="search-form" action="/search" method="get">
    <span class="text-input-wrapper"><input type="text" name="q" autocomplete="off" size="18"/><span class="bersih" title="bersihkan!">&times;</span></span>
    <button class='search-btn' type="submit" value="Submit">cari</button>
</form>

CSS

body {
  background-color:white;
  margin:0 0;
  padding:50px;
  font:normal normal 15px/1.4 Arial,Sans-Serif;
  color:#999;
}
input {font:inherit}
#search-form {width:200px;padding:4px;background:#242424;}
.text-input-wrapper {
  border:1px solid #282828;
  padding:0px;
  display:inline-block;   
  width:150px; 
}
.text-input-wrapper input {
  border:none;
  background:#fff;
  outline:none;
  padding:0;
  margin:0;
  font:inherit;   
  width:150px; 
}
.text-input-wrapper span {
  cursor:pointer;
  color:#369;
  font-weight:bold;
  visibility:hidden;
}
.bersih{ background:#fff;margin-left:-15px}
.search-btn{cursor:pointer;width:40px;height:22px;background:#444;color:#fff;border:1px solid #262626;}
.search-btn:hover{background:#666;}

JavaScript

(function() {
	var searchForm = document.getElementById('search-form'),
		textInput = searchForm.q,
		clearBtn = textInput.nextSibling;
	textInput.onkeyup = function() {
		clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden";
	};
	clearBtn.onclick = function() {
		this.style.visibility = "hidden";
		textInput.value = "";
	};
})();