怎样用javascript删除界面上的一个文本框

最新推荐文章于 2021-08-05 22:41:22 发布
最新推荐文章于 2021-08-05 22:41:22 发布
阅读量633 收藏
点赞数
分类专栏： asp 文章标签： JavaScript 
获得文本框的父节点，使用父节点的removeChild(删除对象)

 <BODY>
    <input type="text" id="test" value="点击删除删除此文本框"/>
    <input type="button" value="删除" οnclick="delInp()"/>
 </BODY>
 <SCRIPT LANGUAGE="JavaScript">
    function delInp()
    {
        var inp = document.getElementById("test");
        document.body.removeChild(inp);
    }
 </SCRIPT>












                

        

        

    




    

      

        

            

              
                
                  void_1987
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
用javascript实现点击按钮删除一个文本框

				
			

			

				

					weixin_44195250的博客
				

				

					10-15
					
					1965
					
				

			

		

		

			
				
用javascript实现点击按钮删除一个文本框
给删除按钮添加点击事件：
onclick="delInput()";
js这样写：
function deleInput(){
var el = document.getElementById('aaa');
el.parentNode.removeChild(el);
}




			
		

	



                

              
                



	

		

			

				
					
点击增加多个文本框也可以删除

				
			

			

				

					10-11
				

			

		

		

			
				
总的来说，“点击增加多个文本框也可以删除”这一特性通过JavaScript实现了动态表单的设计，增强了用户与界面的交互。这种功能在现代网页和应用中非常常见，对于需要用户输入多条信息的情况特别有用，比如填写多行...

			
		

	



                


  
              

                


	

		

			

				
					
js添加删除文本框

				
			

			

				

					huangxinyu_it的专栏
				

				

					12-23
					
					2225
					
				

			

		

		

			
				
var count = 1;

        //用来判断是删除 还是增加按钮 以便count值进行计算
        function checkCount(boolOK, coun) {
            if (boolOK == true) {
                return count++;
            }
            else {
   

			
		

	





	

		

			

				
					
原生js删除提示文本框（操作已有DOM元素）隔一段时间后自动消失-setTimeout

				
			

			

				

					u010234868的专栏
				

				

					08-05
					
					220
					
				

			

		

		

			
				
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box {
			width: 150px;
			height: 50px;
			line-height: 50px;
			background-color: pink;
			margin: 200px auto;
.

			
		

	



		

			
		



	

		

			

				
					
【JavaScript学习】表单脚本：文本框脚本

				
			

			

				

					Wonder233的学习博客
				

				

					11-24
					
					535
					
				

			

		

		

			
				
在HTML中，有两种方式来表现文本框：
使用<input>元素的单行文本框
使用<textarea>的多行文本框。
<!--
文本框：
    type特性为“text”
    size特性：指定文本框中能显示的字符数
    value特性：设置文本框的初始值
    maxlength特性：指定文本框可以接受的最大字符数
-->
<input text="text" size="25" max

			
		

	





	

		

			

				
					
jquery文本框添加删除标签代码.zip

				
			

			

				

					07-04
				

			

		

		

			
				
本示例“jquery文本框添加删除标签代码”是利用jQuery实现的一个功能，允许用户在文本框中输入文字后将其转化为可删除的标签。这种功能常见于许多网站，比如用户输入兴趣爱好或关键词时，会自动生成标签，方便管理和...

			
		

	





	

		

			

				
					
UIsn:一个便于界面管理的脚本

				
			

			

				

					07-05
				

			

		

		

			
				
UIsn 是一个专为简化用户界面管理而设计的脚本，尤其针对那些希望避免直接编写 JavaScript 的开发者。它提供了一种直观的方式来创建、编辑和管理项目中的界面元素，使得布局和样式的调整变得更加简单易行。通过使用 ...

			
		

	





	

		

			

				
					
Javascript写了一个清除“logo1_.exe”的杀毒工具（可扫描目录）

				
			

			

				

					10-31
				

			

		

		

			
				
标题和描述提到的是一个使用JavaScript编写的简易杀毒工具，专门针对名为"logo1_.exe"的病毒。这个病毒会感染Windows系统中的.exe文件，并在含有.exe文件的目录下创建隐藏的"_desktop.ini"文件，导致应用程序图标...

			
		

	





	

		

			

				
					
删除文本框内容的实用jquery插件addclear.zip

				
			

			

				

					11-21
				

			

		

		

			
				
在这个场景中，我们关注的是一个名为"addclear"的jQuery插件，它专门用于帮助用户更方便地删除文本框（input field）中的内容。jQuery是一种强大的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等...

			
		

	





	

		

			

				
					
Js实现动态插入删除文本框

				
			

			

				

					于大大大洋
				

				

					11-10
					
					2503
					
				

			

		

		

			
				
Untitled Document
		
		
			var qus = new Array();

			function Question() {
				this.qno = qus.length;
				this.ono = 0;
				this.create = function(table) {
					var qstr = "";
					qstr += "问题  " + (

			
		

	





	

		

			

				
					
js动态的在页面上增加或删除一个文本框

				
			

			

				

					dusea的博客
				

				

					08-31
					
					3836
					
				

			

		

		

			
				
转自http://www.5xsj.net/program/8/22/297.html




js动态的在页面上增加或删除一个文本框

<!--
var textNumber = 1;
function addTextBox(form, afterElement) {
  // Increment the textbox number
  textNumber++;
  // Create

			
		

	





	

		

			

				
					
仿羊了个羊/王了个王带后台三消游戏源码

				
			

			

				

					08-10
				

			

		

		

			
				
仿羊了个羊、王了个王带后台三消游戏源码，游戏玩儿法类似于养了个羊，有两种模式，一个是普通版，一个是王者荣耀版。

			
		

	





	

		

			

				
					
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习




					
最新发布

				
			

			

				

					08-10
				

			

		

		

			
				
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习


简历是展示个人经历、技能和能力的重要文档，以下是一个常见的简历格式和内容模板，供您参考：

简历格式：

头部信息：包括姓名、联系方式（电话号码、电子邮件等）、地址等个人基本信息。
求职目标（可选）：简短描述您的求职意向和目标。
教育背景：列出您的教育经历，包括学校名称、所学专业、就读时间等。
工作经验：按时间顺序列出您的工作经历，包括公司名称、职位、工作时间、工作职责和成就等。
技能和能力：列出您的专业技能、语言能力、计算机技能等与职位相关的能力。
实习经验/项目经验（可选）：如果您有相关实习或项目经验，可以列出相关信息。
获奖和荣誉（可选）：列出您在学术、工作或其他领域获得的奖项和荣誉。
自我评价（可选）：简要描述您的个人特点、能力和职业目标。
兴趣爱好（可选）：列出您的兴趣爱好，展示您的多样性和个人素质。
参考人（可选）：如果您有可提供推荐的人员，可以在简历中提供其联系信息。
简历内容模板：
姓名:
联系方式:
地址:

求职目标:
（简短描述您的求职意

			
		

	





	

		

			

				
					
ASP新闻管理系统设计与实现(源代码+论文).rar

				
			

			

				

					08-10
				

			

		

		

			
				
资源包主要包含以下内容：

ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。

数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。

详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。

项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。

毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。

			
		

	





	

		

			

				
					
编程课程设计报告资源.docx

				
			

			

				

					08-10
				

			

		

		

			
				
编程课程设计报告的资源通常包括模板、指导书、示例和参考文献。以下是一些有用的资源，可以帮助你撰写高质量的课程设计报告：

			
		

	





	

		

			

				
					
ASP某高校工资管理系统的设计与实现(源代码+论文).rar

				
			

			

				

					08-10
				

			

		

		

			
				
资源包主要包含以下内容：

ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。

数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。

详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。

项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。

毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。

			
		

	





	

		

			

				
					
用h5+css+js写一个登入界面

				
			

			

				

					06-01
				

			

		

		

			
				
好的，我可以为您提供一个简单的登陆界面示例代码。以下是 HTML 、CSS 和 JavaScript 代码：

HTML 代码：
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="login-box">
    <h2>Login Here</h2>
    <form>
      <div class="user-box">
        <input type="text" name="" required="">
        <label>Username</label>
      </div>
      <div class="user-box">
        <input type="password" name="" required="">
        <label>Password</label>
      </div>
      <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Submit
      </a>
    </form>
  </div>
</body>
</html>
```

CSS 代码：
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: #f1f1f1;
}

.login-box {
  width: 400px;
  height: 500px;
  background: #fff;
  color: #000;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  padding: 70px 30px;
  border-radius: 20px;
}

.login-box h2 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 30px;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #000;
  outline: none;
  background: transparent;
}

.login-box .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #000;
  pointer-events: none;
  transition: 0.5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #000;
  font-size: 12px;
}

.login-box a {
  display: inline-block;
  text-decoration: none;
  color: #000;
  background: #fff;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 20px;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #000);
  animation: animate1 1s linear infinite;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #000);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #000);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #000);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}

@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}

.login-box a:hover span {
  animation: none;
}

.login-box a:hover span:nth-child(1) {
  left: 0;
}

.login-box a:hover span:nth-child(2) {
  top: 0;
}

.login-box a:hover span:nth-child(3) {
  right: 0;
}

.login-box a:hover span:nth-child(4) {
  bottom: 0;
}
```

JavaScript 代码：
```
const inputs = document.querySelectorAll(".user-box input");

function addClass() {
  let parent = this.parentNode;
  parent.classList.add("focus");
}

function removeClass() {
  let parent = this.parentNode;
  if (this.value == "") {
    parent.classList.remove("focus");
  }
}

inputs.forEach(input => {
  input.addEventListener("focus", addClass);
  input.addEventListener("blur", removeClass);
});
```

这段代码将会渲染一个登陆框，包含输入用户名和密码的文本框，以及一个提交按钮。CSS 代码将添加一些样式，而 JavaScript 代码将帮助我们在文本框获得焦点和失去焦点时添加或删除一个类名，以便更好地控制样式。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值