I want my <p> to disappear when double clicked.But I can't figure out what's going wrong here.

I want my <p> to disappear when double clicked.But I can't figure out what's going wrong here.

  <title>click demo</title>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

  <style>
          p{
            color: red;
            margin: 5px;
            cursor: pointer;
          }
          p:hover {
            background: yellow;
          }
  </style>


</head>
<body>
   <div>   
      <form>
           <input type="text" id="myText"  value=""><br>
      </form>
           <input type="button" id="but" value="Add" />
    </div>

 <script>                  
                    $("#but").click(function(){

                        var entered = document.getElementById("myText").value;
                        document.getElementById("myText").value="";
                      
                           if(entered!="")
                                {
                               $("body").prepend('<p>' + entered + '</p>');  
                                }

                                                                   
                                          });
      
                      $("p").dblclick(function(){
                                             $(this).hide();
                                       });

  </script>     

</body>


This code represents a section of my main code.double clicking on <p> to hide that particular para isin't working for me.Kindly help.