【jQuery】简单的点击删除按钮清空输入框的内容

最新推荐文章于 2024-07-21 02:53:05 发布

原创最新推荐文章于 2024-07-21 02:53:05 发布 · 2.4w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的HTML页面结合jQuery实现的功能：当点击按钮时，两个文本输入框的内容会被清空。此功能通过选择器定位到按钮和输入框元素，并在按钮被点击时触发事件，将输入框的值设为空字符串。

这里写图片描述

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <div class="text">
            出发地：<input type="text"/>
            目的地：<input type="text"/>
        </div>
        <input class="btn" type="button" value="X"/>
    </div>
    <script src="../js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(e){
            /*点击删除 清空输入框的内容*/
            $('.btn').click(function(){
                $('.text input').val('');
            });
        });
    </script>
</body>
</html>