ul下li的添加与删除jQuery

 <div>
        <input type="text" value="">
        <button>添加</button>
        <ul>
            <li>西瓜</li>
            <li>香蕉</li>
            <li>苹果</li>
        </ul>
    </div>

  <script src="script/jquery.js"></script>
    <script>


        $("ul").on("click", "li", function () {
            $(this).remove();
        })

        $("button").click(function () {
            let text = $("input").val();
            $("ul").append(`<li>${text}</li>`);
        })

    </script>