title: show a div when certain word is typed not working as desired
body: <p>Hey all so I'll keep it short. I know there've been some questions asked similar to this but none of them are able to answer what I'm trying to achieve. This is what I want the code to do:</p>
  <ul>
  <li>Show a div when forward slash &quot;/&quot; is typed in textarea</li>
  <li>Not show a div when forward slash is not typed</li>
  <li>hide the pop up when the forward slash is deleted/backspaced</li>
  </ul>
  <p>I can achieve the first two with the following code I'm working with right now: <a href="https://jsfiddle.net/jtk37vs8/1/" rel="nofollow noreferrer">https://jsfiddle.net/jtk37vs8/1/</a>. However the problem is, whenever I type forward slash and then delete it, the pop up still stays there. I'm new to JS and the code is kinda unorganized but it's quite easy to understand. So basically I'd appreciate if any of you could at least tell me if there is any straightforward way to achieve this? Thank you for your patience and reading my query.</p>
  <pre><code>function getCaretCoordinates() {
    let x = 0,
      y = 0;
    const isSupported = typeof window.getSelection !== &quot;undefined&quot;;
    if (isSupported) {
      const selection = window.getSelection();
      // Check if there is a selection (i.e. cursor in place)
      if (selection.rangeCount !== 0) {
        // Clone the range
        const range = selection.getRangeAt(0).cloneRange();
        // Collapse the range to the start, so there are not multiple chars selected
        range.collapse(true);
        // getCientRects returns all the positioning information we need
        const rect = range.getClientRects()[0];
        if (rect) {
          x = rect.left; // since the caret is only 1px wide, left == right
          y = rect.top; // top edge of the caret
        }
      }
    }
    return { x, y };
  }
  
  function getCaretIndex(element) {
    let position = 0;
    const isSupported = typeof window.getSelection !== &quot;undefined&quot;;
    if (isSupported) {
      const selection = window.getSelection();
      // Check if there is a selection (i.e. cursor in place)
      if (selection.rangeCount !== 0) {
        // Store the original range
        const range = window.getSelection().getRangeAt(0);
        // Clone the range
        const preCaretRange = range.cloneRange();
        // Select all textual contents from the contenteditable element
        preCaretRange.selectNodeContents(element);
        // And set the range end to the original clicked position
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        // Return the text length from contenteditable start to the range end
        position = preCaretRange.toString().length;
      }
    }
    return position;
  }
  
  
  $(&quot;#contenteditable&quot;).bind(&quot;keypress&quot;, function toggleTooltip(e) {
    const tooltip = document.getElementById(&quot;tooltip&quot;);
    
  if(String.fromCharCode(e.keyCode) == '/') {
      
      
      const { x, y } = getCaretCoordinates(); 
    
    $(&quot;.tooltip&quot;).show();
      // tooltip.setAttribute(&quot;aria-hidden&quot;, &quot;false&quot;);
      tooltip.setAttribute( &quot;style&quot;, `display: inline-block; left: ${x - -10}px; top: ${y - 160}px`
      );
    } 
    
    else  if (document.getElementById('contenteditable').innerHTML.indexOf(&quot;/&quot;) != -1) {
     // $(&quot;.tooltip&quot;).hide(); 
     // tooltip.setAttribute(&quot;aria-hidden&quot;, &quot;true&quot;);
      tooltip.setAttribute(&quot;style&quot;, &quot;display: none;&quot;);
       
   }  
     
    // else if (document.getElementById('contenteditable').innerHTML.indexOf(&quot;/&quot;) &gt;=0) {
      // tooltip.setAttribute(&quot;aria-hidden&quot;, &quot;true&quot;);
      //tooltip.setAttribute(&quot;style&quot;, &quot;display: none;&quot;);    
   // }
      
   else { 
    //  $(&quot;.tooltip&quot;).hide();
     // tooltip.setAttribute(&quot;aria-hidden&quot;, &quot;true&quot;);
      //tooltip.setAttribute(&quot;style&quot;, &quot;display: none;&quot;);
     
      
    } 
  } )
  </code></pre>