点击按钮，新增输入框，再点击按钮，删除输入框

最新推荐文章于 2024-06-21 09:03:43 发布
最新推荐文章于 2024-06-21 09:03:43 发布
阅读量2.8k 收藏 4
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36538012/article/details/100517884
版权

需求：点击新增按钮的时候，会出现一个新增的输入框，按钮文字新增变成删除，再次点击删除按钮，出现的输入框隐藏，按钮文字变成新增字样。

大致效果是这样的：

为了更好的呈现效果，这里放一个类似的demo。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

		<style>
			#scale {
				background: blue;
				background-size: 100% 100%;
				width: 203px;
				height: 38px;
				color: #fff;
				border-radius: 2px;
				text-align: center;
				line-height: 35px;
			}
			
			#scroll {
				width: 140px;
				height: 20px;
				display: none;
				margin-top: 25px;
			}
		</style>
	</head>

	<body>
		<div class="row">
			<div class="col-md-12 col-sm-12  col-xs-12">
				<div class="form-group">
					<label class="col-md-4 col-sm-4  col-xs-4 control-label"></label>
					<div class="col-md-7 col-sm-7  col-xs-7">
						<div id="scale" style="">新增点位</div>
						<div id="scroll">
							<input type="text" class="single-slider" value="5" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		// 新增删除切换显示
		$("#scale").click(function() {
			var btnVal = $(this).text();
			$(this).text(btnVal === '新增点位' ? '删除点位' : '新增点位');
			$('#scroll').toggle();
			if(btnVal == '删除点位') {
				$('#scale').css("background", "blue")
			} else {
				$('#scale').css("background", "red")
			}
		});
	</script>
</html>

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。

祈澈菇凉
关注
专栏目录
vue+element UI 实战点击按钮添加一组输入框写自定义目录
daintyaaa的博客
03-28 655
vue+element UI 实战点击按钮添加一组输入框写自定义目录。
html单击按钮时弹出输入框,点击按钮弹出模态框的一系列操作代码实例
weixin_39683021的博客
06-04 3946
实现功能提交按钮功能：点击提交按钮的时候都会弹出模态框，但是有不同的状态：审核状态未通过：弹出未通过理由的input输入框，模态框中除了取消和确定按钮，新增确定并保存医院的按钮审核状态已通过：如果新增医院的经纬度没有填写，会提示填写经纬度，填写之后点击提交按钮，模态框中显示确定和取消按钮审核状态待审核：模态框中显示确定和取消按钮添加医院的html代码：所属医院@if($data->hospi...
el-input,输入框点击增加一个输入框，点击删除指定输入框
weixin_39170410的博客
07-31 479
【代码】el-input,输入框点击增加一个输入框，点击删除指定输入框。
JQuery点击按钮新增input框
小伙伴们全都Lucky！
09-02 2582
1.正常状态 2.点击添加 3. 点击添加的input框后面的添加按钮 4.点击按钮刷新规则下方表格会弹出各个排列组合，价格可以修改 5.上代码 <div class="videobox" style="margin-left:-12px;"> <label class="layui-form-label" style="width: 90px;">商品规格</label> ...
vue项目：点击按钮新增一个input输入框
qq_37953045的博客
03-21 2436
vue项目：点击按钮新增一个input输入框
基于Vue的 点击按钮 添加一个input框
有问题可关注公众号：前端研究院 后台输入问题回复
06-17 4735
通过点击一个按钮添加一个input输入框 值绑定到 items中，每一个输入框对应一个item <template> <div> <input type="text" v-for="(item,i) of items" v-model="items[i]" :key="i"> <button @click="onAdd">添加</button> </div> </template> <scr
js简单实现表单中点击按钮动态增加输入框数量的方法
10-23
本文将详细讲解如何使用JavaScript实现点击按钮动态增加输入框数量的方法。 首先，要实现这一功能，我们需要用到JavaScript的基本知识，包括对DOM的操作以及事件处理。在这篇文章中，主要涉及到了两个核心知识点：...
jQuery实现动态添加、删除按钮及input输入框的方法
10-19
在点击删除按钮时，会检查当前输入框数量是否大于1（确保至少留有一个输入框），然后移除对应的div元素。 上述代码片段中还包含了对超链接的设置，使用rel属性来确保超链接不会触发默认的行为，同时使用href="#"来...
bootstrap 通过加减按钮实现输入框组功能
01-19
当点击 – 按钮时，会删除这一行输入框组 html代码如下： 中心机IP: <button class=btn btn-info type=button data-toggle=tooltip title=新增 id=addCenterIpGrpBtn onclick=addCenterIpGrp
【vue动态输入框实现】点击按钮增加或删减一行
Alice_LiLi的博客
12-31 3642
1、实现动态输入框，首先第一步写出一个你想要的输入框放在html中，并附加增减按钮。 <div class="departmentAndPrincipal"> <div> <a-cascader :option="options" placeholder="请选择涉及部门及负责人" class="involeDepartmnt" /> <a-icon type="close-circle" class="deleteTcon" @click="deleteDepar
微信小程序-点击一次按钮-新增一个输入框(input)
最新发布
weixin_51494148的博客
06-21 260
微信小程序-点击一次按钮-新增一个输入框(input)
点击增加input
别在熬夜了！
07-11 1457
script function add1(){     var input1 = document.createElement('input');     input1.setAttribute('type', 'file');     input1.setAttribute('name', 'file[]');     var input2 = document.createE
JQuery 实现点击按钮添加及删除 input 框
sout-lanys
07-17 1167
用于记录开发中常用到的，快捷开发。
js 点击新增按钮 添加文本框和删除按钮
小米粒的博客
06-05 5374
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> var count = 0; function addByScript() { var tab...
layui表单动态添加输入框
挪威森林喵的博客
12-23 8469
layui表单动态添加输入框 一、需求:新增表单内，点击加号按钮动态增加删除输入框 红色部分为新增的输入框 二、页面html代码 代码如下（示例）： <div class="layui-card-body"> <div class="layui-fluid"> <form class="layui-form" action="" lay-filter="example"> <ul class="addlmrlist
点击按钮新增或删除一项
程序媛的博客
03-08 288
第一列描述项是一个下拉项，每增加一项，新增加的描述项所选择的值不能与其他项选择的值相同，相同则提示。该项已存在，请重新添加。
vue 写加加减减 :(点击生成按钮, 新增一个li(随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值)
m0_61749828的博客
09-24 1769
<template> <div id="app"> <ul> <li> <span></span> <button>删除</button> </li> </ul> <button>生成</button> </div> </template> <s.
JS实现点击按钮添加输入框并输出值
热门推荐
qq_42583562的博客
12-29 2万+
【代码】JS实现点击按钮添加输入框并输出值。
vue elementui点击按钮新增输入框
weixin_42282414的博客
04-16 1万+
点击加号+、按钮新增输入框input elementui 效果展示： 看看给你几个核心关键词能否启发你实现：v-for array push splice 有启发吗？ 核心思路 //我将我的代码简化到最简，和工程相关的已经删除，启发思路即可 <div v-for="(item,index) in arrayData" :key="item.id"> //上面这个是关键代码，所有思路靠这个打通 <el-input
移动端 点击新增 动态新增一行输入框 带删除按钮
05-19
可以通过以下步骤实现这个功能： 1. 在HTML中创建一个表单，并为其添加一个按钮。当用户点击该按钮时，将动态添加新的表单行。 ```html <form> <div id="form-rows"> <div class="form-row"> <input type="text" name="input[]" placeholder="Enter some text"> <button type="button" class="remove-row">Remove</button> </div> </div> <button type="button" id="add-row">Add New Row</button> </form> ``` 2. 在JavaScript中，为“添加新行”按钮添加一个事件监听器。当用户点击该按钮时，将调用一个函数来动态创建新的表单行并将其添加到表单中。 ```javascript const formRows = document.getElementById('form-rows'); const addRowBtn = document.getElementById('add-row'); addRowBtn.addEventListener('click', function(event) { const newRow = document.createElement('div'); newRow.classList.add('form-row'); newRow.innerHTML = ` <input type="text" name="input[]" placeholder="Enter some text"> <button type="button" class="remove-row">Remove</button> `; formRows.appendChild(newRow); }); ``` 3. 为新创建的表单行中的“删除”按钮添加事件监听器。当用户点击该按钮时，将从表单中删除相应的表单行。 ```javascript formRows.addEventListener('click', function(event) { if (event.target.classList.contains('remove-row')) { const row = event.target.closest('.form-row'); row.parentNode.removeChild(row); } }); ``` 这样，当用户在移动设备上点击“添加新行”按钮时，将动态添加一行包含输入框和删除按钮的表单行，并且用户可以通过点击相应行的“删除”按钮来删除该行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值