jquery加减输入框

最新推荐文章于 2022-10-17 20:09:04 发布

s_turnTurn

最新推荐文章于 2022-10-17 20:09:04 发布

阅读量314

点赞数

文章标签： javascript html html5 jquery

本文链接：https://blog.csdn.net/s_turnTurn/article/details/108101563

版权

输入框后面有加号,减号,可以控制输入框的增加和删除


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="control-keyword-area">
        <div class='control-label'>
            <span style="color: #ff0000;">*</span> 标题 
            <input type='text' value="" placeholder="请输入" />
            <input type='text' placeholder="请输入" value="" />
            <input type="button" id="plus" value="+"> 
        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        /*---js控制加输入框----*/
        $(document).on('click', '#plus', function () {
            var $this = $(this);
            var plusBox = `
            <div class='control-keyword'>
            <div class='controls'>
                <span style='color: #ff0000;'>*</span> 标题 
                <input type='text' value='' placeholder='请输入' />
                <input name='put_num' type='text' placeholder='请输入' value='' />
                <input type='button' id='reduce' value='-'></b>
            </div>`;
            $this.parents('.control-keyword-area').append(plusBox);
        })

        /*---js控制减输入框----*/
        $(document).on('click', '#reduce', function () {
            var $this = $(this);
            $this.parents('.control-keyword').remove()
        })
    </script>
</body>
</html>

在这里插入图片描述

s_turnTurn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery加减输入框

输入框后面有加号,减号,可以控制输入框的增加和删除<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg
复制链接

扫一扫