Make <p> toggle reappear

Question

I've made a lookup tool where a list of items appear, and when the item is clicked the menu disappear. This may be a smple fix

Works great the first time, but then the lookup tool does not work afterward.

First, you type your item in a textbox with a div that calls the lookup:

<input type="text" name="item" id="item" onkeyup="showResult(this.value)"     placeholder="Enter Item Number" autocomplete="off">
<div id="lookup"></div>

My items look like this:

<p><a href=# onclick=\"xmlhttpPost(lookup string and target div)>Item</a></p>

I used this script to make the item disappear upon click:

$(document).ready(function () {

    $('#lookup').on({

       click: function () { $('#lookup').toggle();
       return false; }

    }, 'a');

});

Works well the first time, but it permanetly hides the lookup afterward.

Here's the redacted lookup code:

function showResult(str,itemnum)
{

    if (str.length==0)
      {
      document.getElementById("lookup").innerHTML="";
      document.getElementById("lookup").style.border="0px";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("lookup").innerHTML=xmlhttp.responseText;
        document.getElementById("lookup").style.border="1px solid #A5ACB2";
        }
     }
      var e = document.getElementById("location");
      var location = e.options[e.selectedIndex].value;

    xmlhttp.open("GET","sql/lookup.php?category="+location+"&name="+str,true);
    xmlhttp.send();
    }

I'm about to wrap this project but this is the last little fix. Thanks in advance.

Answer 1

If all you're trying to do is clear the lookup contents on click, don't hide the whole element, just empty it out:

$('#lookup').on({

  click: function () 
   { 
     $('#lookup').empty();
     return false; 
   }
}, 'a');