title: Remove input text when click button
body: <p>I'm trying to remove input's val when clicking a button that appear when focusing on input.</p>
  
  <p>This is my html:</p>
  
  <pre><code>&lt;div class="search-area"&gt;
                  &lt;form action="#" id="ingredientSearchForm"&gt;
                      &lt;input type="text" placeholder="Arama" id="ingredientsSearch"/&gt;
                      &lt;span class="clearable"&gt;&lt;/span&gt;
                      &lt;span&gt;&lt;/span&gt;
                      &lt;input id="ingredientSearchSubmit" type="submit" class="hidden" placeholder="Arama"/&gt;
  
                  &lt;/form&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>And this is javascript function:</p>
  
  <pre><code>var searchinput = $(".search-area").find("input");
  
  
          searchinput.focus(function(){
              $(this).data('placeholder',$(this).attr('placeholder'));
              $(this).attr('placeholder','');
              $(this).siblings(".clearable").show();
  
  
  
          });
  
          $(".search-area").find(".clearable").on("click", function() {
              $(this).val('');
          });
          searchinput.blur(function(){
              $(this).attr('placeholder',$(this).data('placeholder'));
              $(this).siblings(".clearable").hide();
  
  
          });
  </code></pre>
  
  <p>.clearable is a span with background. Normally it is display:none.</p>