input的val添加到元素内可删除

最新推荐文章于 2023-11-02 14:05:01 发布
原创 最新推荐文章于 2023-11-02 14:05:01 发布 · 613 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个简单的HTML页面，该页面通过使用jQuery来实现输入框与按钮的交互功能。用户可以在输入框中输入教师名称，并通过点击按钮将名称添加到页面下方的列表中。此外，还提供了一个删除按钮以便移除列表项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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>

<style>

* {

padding: 0;

margin: 0;

}

 

.aaa {

border-bottom: 1px solid darkgrey;

float: left;

height: 39px;

line-height: 39px;

width: 100%;

 

}

 

.aaa:hover {

background: #3C8CBB;

color: white;

}

 

.aaa:hover .span-x {

color: white;

}

 

.span-x {

margin-left: 1%;

color: darkgrey;

padding-left: 14px;

padding-right: 14px;

cursor: pointer;

 

float: right;

}

 

#itemList {

 

overflow-y: scroll;

width: 410px;

margin-top: 5px;

height: 200px;

border: 1px solid darkgrey;

}

</style>

</head>

 

<body>

<input type="text" id="teacherInput">

<button id="itemAdd" style="background: white;border: 1px solid darkgrey;">点击添加</button>

 

<div id="itemList">

</body>

 

</html>

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<script>

function myFun() {

var ipt = document.getElementById("teacherInput");

var btn = document.getElementById("itemAdd");


 

btn.onclick = function () {

if ($("#teacherInput").val() != "") {

var newObj = $("<div class='aaa'>" + '<span style="padding: 5px;">' + ipt.value + '</span>' + '<span class="span-x">X</span>' + "</div>");

 

$("#itemList").append(newObj);

$("#teacherInput").val("")

 

$(".span-x").click(function () {

$(this).parent().css("display", "none")

})

 

}

}

}

myFun();

 

</script>

郭豪杨
关注
JavaScript 表单特效: 清除 input 的默认值
CodeWhizZ的博客
09-22 253
当用户在输入框中输入内容时，通常会有一个默认值显示在输入框中，以提示用户应该输入的内容。然而，有时候这个默认值可能会干扰用户的输入体验，因此我们可能需要一种方法来清除输入框中的默认值。当用户点击输入框时，输入框中的默认值将被清空。接下来，我们需要编写 JavaScript 代码来清除输入框的默认值。事件处理函数，我们可以在用户与输入框交互时提供更好的用户体验。事件处理函数中，我们检查输入框的值是否等于默认值。首先，我们需要在 HTML 中定义一个输入框，并设置一个默认值。在上面的代码中，我们首先通过。
实现Input输入时可清除功能
u012292938的专栏
01-12 2540
在一下页面输入框中有时会输入错误，这时需要有全部清除功能，下面是我们利用监听input的状态从而实现相应功能如下： 1. InputRemoveActivity.java package com.example.androiddialog;import android.app.Activity;import android.os.Bundle;import android.text.Edita
实现可清空的input和重置按钮
00年女程序员分享自己的学习笔记
07-20 8767
此时，我们查询完成数据后，把输入框内容清空，点击查询按钮可以查询到所有用户信息。现在我们可以在输入框添加一个可以把输入框数据都清空的按钮，点击按钮输入框内容清空同时查询出所有用户信息。查阅element文档input中有一个可清空输入框，是使用clearable属性得到的...
手把手教你封装一个带删除按钮的 input 输入框
qczzc的博客
05-04 1426
提示：需要大家熟悉css中的定位position以及v-model的基础原理。提示：以下是本篇文章正文内容，下面案例可供参考需要熟练掌握 css 、vue计算属性 、v-model的原理欢迎小伙伴们留言讨论，也欢迎大佬😎。
原生input实现清空按钮
weixin_40841731的博客
06-21 2702
【代码】原生input实现清空按钮。
自定义在input生成tag标签样式，标签可删除。组件封装
最新发布
Sunny_lxm的博客
11-02 1444
自定义在input生成tag标签样式，标签可删除
layui实现input框添加tag
04-24
// 创建新的tag元素并添加到页面中 $('<span class="tag">' + tagValue + '<i class="layui-icon layui-icon-close"></i></span>').insertBefore(this); // 清空输入框 $(this).val(''); // 添加删除tag的...
jQuery动态添加、删除元素的方法
10-26
同时，为了便于删除，我们还为列表项内部增加了一个隐藏的<input>输入框，并为删除按钮设置了onclick事件处理器。 2. jQuery动态删除元素： 删除元素则需要使用jQuery的其他方法，如.remove()或.replaceWith()。在...
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
10-22
首先，jQuery的动态添加元素功能是通过`$()`函数创建新的DOM元素，并使用`.append()`、`.before()`或`.after()`方法将其插入到现有元素中。在表单上传场景中，通常会涉及到`<input type="file">`元素，用于让用户...
Jquery动态添加及删除页面节点元素示例代码
10-25
### jQuery动态添加及删除页面节点元素技术解析 本文将详细介绍如何使用jQuery来动态地向页面添加和删除节点元素。通过示例代码演示整个过程，帮助理解如何利用jQuery库来简化DOM操作。示例代码将演示如何通过点击...
jQuery动态添加<input type="file">
10-22
2. **编写添加函数**：在点击事件触发时，定义一个函数来动态创建包含`<input type="file">`的新表格行(`<tr>`)，并将其添加到指定的表格(`<table>`)中。 3. **创建删除功能**：为每个动态生成的文件输入框添加一个...
bootstrap-tagsinput 使用方法
bossxu_的博客
01-09 2万+
bootstrap-tagsinput 最简单的使用方法只需要引五个文件 在把需要用input初始化一下,bootstrap-tagsinput 需要用的js和css 文件已在文本最后附上 html lang="en"> head> meta charset="UTF-8"> title>title> link rel="stylesheet" href="../
微信小程序 多个input点击按钮添加和删除
heavenz19的博客
04-25 1959
微信小程序 多个input添加和删除 效果图展示 xml注意事项： input中添加 value=’{{names[index+1]}}’ data-index=’{{index}} bindblur=“bindinput”' <view class="adds"> <view class="lis"> <view class="title">货品名称</view> <input type="text"
输入框设置为可删除
weixin_43167662的博客
11-07 494
clearable
input 清空
yu1xue1fei的博客
11-14 349
$('#imput').val("");
前端 如何利用css3 特性 让 input 输入框有个叉叉x 能够删除整个input 框的内容 简单实用
qq50347110的博客
03-18 5340
input框旁边的清空input按钮，我们一般在制作注册以及登录页面的时候会用到。一般的样子是这个样子滴： =》 我们要实现的功能是，在输入的时候，右侧的清空按钮显示出来，然后当删除input中的内容的时候，清空按钮也消失。 以前实现的时候，我用的是“keyup”事件。某一次在做触屏版的时候，不知怎么搞的就是触发不了事件，于是像一位牛人请教，get到了这个新技能： 首先看下这个布局的HT...
前端小功能-input清除
weixin_44006708的博客
06-09 2037
点击input效果： 点击右侧按钮则清除input数据 html页面： <div > <input type="hidden" name="user_id" id="user_id" value="0" /> <input name="user_name" id="user_name" class="" type="text" onClick="Click(this,'user_id');" onBlur="Clear_div(thi
纯css实现输入框（input）显示清除按钮
拾柒唸的博客
02-18 5118
纯css实现输入框（input）显示清除按钮 实现效果：当输入框中有文字时，显示一旁删除的小叉 html部分： <div class="s-input-box"> <input type="text" required="required" class="s-input"> <div class="clear-box"></div> </div> required ：提交前必要填写的字段（判断输入框是否有内容） css部分（
jquery清空input标签的值,清除标签里面的内容
热门推荐
weixin_43975276的博客
10-24 2万+
清除input标签的值,可以通过直接将input标签的值设置为空来实现. <input id="user" type="text" name="username" placeholder="请输入用户名" required/> $('#user').val('');//通过val()方法设置value的值 清除标签里面的内容,也可以用和上面类似的原理实现 $('#notify').html(''); 但是这样有缺陷,清空的时候只会把里面的内容清空掉,如果里面的内容绑定了事件,事件是没有被
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值