html中点击后消失了,HTML <input>按钮消失点击

如果您希望在用户点击按钮后使其消失，可以通过添加JavaScript代码来实现。以下是一个简单的示例： ```html <button onclick="this.style.display='none'">点击我消失</button> ``` 这个代码将为按钮添加一个点击事件，并在用户点击时将其样式的"display"属性设置为"none"，从而使按钮消失。您也可以使用CSS来实现同样的效果，如下所示： ```html <style> .hidden { display: none; } </style> <button onclick="this.classList.add('hidden')">点击我消失</button> ``` 这个代码使用CSS将一个名为“hidden”的类添加到按钮中，并在用户点击时将其添加到按钮中，从而使其消失。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { display: flex; justify-content: space-between; } .col1, .col2 { width: 45%; padding: 10px; border: 1px solid #ccc; } span { position: absolute; bottom: 20px; right: 20px; height: 50px; width: 50px; background-color: red; text-align: center; padding-top: 20px; border-radius: 60%; } </style> </head> <body> <div class="container"> <div class="col1"> <h2>刘天赐</h2> <p>解决急急急</p> <input type="button" value="删除"> <button>修改</button> </div> <div class="col2"> <h2>王旭康</h2> <p>看iii科技计划较</p> <input type="button" value="删除"> <button>修改</button> </div> </div> <span>New</span> <script> let </script> </body> </html> 要求：点击input标签让其所在的div消失，点击button标签可以弹出一个框可以修改他们所在div中p和h2标签的内容并保存。点击span标签可以新增一个div并报存在页面中。你能帮忙写一个完整的代码吗满足上面的要求

当点击input标签时，需要给它绑定一个点击事件，让它所在的div消失。当点击button标签时，需要弹出一个框，让用户可以修改div中的h2和p标签内容并保存。点击span标签时，需要新增一个div并显示在页面中。以下是完整的代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { display: flex; justify-content: space-between; } .col1, .col2 { width: 45%; padding: 10px; border: 1px solid #ccc; position: relative; /* 添加相对定位 */ } span { position: absolute; bottom: 20px; right: 20px; height: 50px; width: 50px; background-color: red; text-align: center; padding-top: 20px; border-radius: 60%; cursor: pointer; /* 鼠标指针变为手型 */ } </style> </head> <body> <div class="container"> <div class="col1"> <h2>刘天赐</h2> <p>解决急急急</p> <input type="button" value="删除"> <button>修改</button> </div> <div class="col2"> <h2>王旭康</h2> <p>看iii科技计划较</p> <input type="button" value="删除"> <button>修改</button> </div> </div> <span>New</span> <script> let deleteBtns = document.querySelectorAll('input[type="button"]'); // 获取所有的删除按钮 let editBtns = document.querySelectorAll('button'); // 获取所有的修改按钮 let addBtn = document.querySelector('span'); // 获取新增按钮 // 给删除按钮绑定点击事件，让它所在的div消失 deleteBtns.forEach(function(btn) { btn.addEventListener('click', function() { this.parentNode.style.display = 'none'; }); }); // 给修改按钮绑定点击事件，弹出框让用户修改div中的h2和p标签内容并保存 editBtns.forEach(function(btn) { btn.addEventListener('click', function() { let h2 = this.parentNode.querySelector('h2'); let p = this.parentNode.querySelector('p'); let newH2 = prompt('请输入新的h2内容', h2.innerText); let newP = prompt('请输入新的p内容', p.innerText); if (newH2 !== null && newP !== null) { // 用户点击了确定 h2.innerText = newH2; p.innerText = newP; } }); }); // 给新增按钮绑定点击事件，新增一个div addBtn.addEventListener('click', function() { let div = document.createElement('div'); div.className = 'col'; div.innerHTML = '<h2>New Title</h2><p>New Content</p><input type="button" value="删除"><button>修改</button>'; document.querySelector('.container').appendChild(div); // 给删除按钮和修改按钮绑定事件，与之前的按钮一样 let deleteBtn = div.querySelector('input[type="button"]'); let editBtn = div.querySelector('button'); deleteBtn.addEventListener('click', function() { this.parentNode.style.display = 'none'; }); editBtn.addEventListener('click', function() { let h2 = this.parentNode.querySelector('h2'); let p = this.parentNode.querySelector('p'); let newH2 = prompt('请输入新的h2内容', h2.innerText); let newP = prompt('请输入新的p内容', p.innerText); if (newH2 !== null && newP !== null) { h2.innerText = newH2; p.innerText = newP; } }); }); </script> </body> </html> ```

一、页面中有一个div，通过嵌入式样式设置这个div的高度200px,宽度200px边框是3px的蓝色实线，并且是圆形。（20分）二、给页面上的未访问的a链接的字体颜色设置为黄色；给页面中的已经点击过的a链接字体颜色设置为红色;（10分）三、写出下面样式的权重值，并写出能够使之生效的html代码（10分） form input[name="txt"] { color: red; } div>.item:hover { font-size: 30px; } 四、创建一个导航栏，包含影院、电影和个人中心三个选项，这个导航栏距离页面顶部200px,当导航栏滚动到页面顶部时，会自动吸附在顶部不会消失。（10分）五、创建一个表单，可输入账号（文本框）和密码（密码框），点击提交按钮，可以提交到reg.html页面（显示注册成功），点击重置按钮可以恢复表单的初始状态。（20分）六、页面中有无序列表,将页面中所有元素的第一个li子元素的字体颜色设置位红色（10分） <ul> <li>HTML<li> <li>CSS<li> <li>JS<li> </ul> <ol> <li>语文<li> <li>数学<li> <li>英语<li> </ol> 七、在页面中放置一个p标签，设置它距离左边为200px，上边为100px。(10分) 八、设置div中的所有元素水平分布，并且垂直居中（10分） <div id="box" style="border: 1px solid red;"> <p>张三</p> <p>李四</p> <p>王五</p> </div>

一、页面中有一个div，通过嵌入式样式设置这个div的高度200px,宽度200px边框是3px的蓝色实线，并且是圆形。 ```html <div style="width: 200px; height: 200px; border: 3px solid blue; border-radius: 50%;"></div> ``` 二、给页面上的未访问的a链接的字体颜色设置为黄色；给页面中的已经点击过的a链接字体颜色设置为红色; ```html <style> a:link { color: yellow; } a:visited { color: red; } </style> ``` 三、写出下面样式的权重值，并写出能够使之生效的html代码样式的权重值分别为：0111（form input[name="txt"]）和 0021（div>.item:hover）。 ```html <form> <input type="text" name="txt" value="Hello World!"> </form> <div> <p class="item">This is a paragraph.</p> <p class="item">This is another paragraph.</p> </div> ``` 四、创建一个导航栏，包含影院、电影和个人中心三个选项，这个导航栏距离页面顶部200px,当导航栏滚动到页面顶部时，会自动吸附在顶部不会消失。 ```html <style> .navbar { position: fixed; top: 200px; width: 100%; background-color: #f1f1f1; } </style> <div class="navbar"> <a href="#">影院</a> <a href="#">电影</a> <a href="#">个人中心</a> </div> ``` 五、创建一个表单，可输入账号（文本框）和密码（密码框），点击提交按钮，可以提交到reg.html页面（显示注册成功），点击重置按钮可以恢复表单的初始状态。 ```html <form action="reg.html"> <label for="username">账号：</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> ``` 六、页面中有无序列表,将页面中所有元素的第一个li子元素的字体颜色设置位红色。 ```html <style> li:first-child { color: red; } </style> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> </ul> <ol> <li>语文</li> <li>数学</li> <li>英语</li> </ol> ``` 七、在页面中放置一个p标签，设置它距离左边为200px，上边为100px。 ```html <p style="position: absolute; top: 100px; left: 200px;">这是一个段落</p> ``` 八、设置div中的所有元素水平分布，并且垂直居中。 ```html <style> #box { display: flex; justify-content: space-between; align-items: center; height: 200px; } </style> <div id="box" style="border: 1px solid red;"> <p>张三</p> <p>李四</p> <p>王五</p> </div> ```

html中点击后消失了,HTML <input>按钮消失点击

相关推荐

Ant Design前端框架-其他

AlertBox:这是确认的组成部分

jQuery详细教程

uniapp input弹出键盘后，点击键盘右下角键盘就消失了

html 输入框变红色,input输入框 输入错误时，点击注册按钮，输入框的边框变成红色，重新输入时，边框颜色恢复原来的，同时错误提示消失？...

html,怎么在一个input标签按钮里面显示一个对钩动画然后消失？

在一个html页面中有一个登录按钮，点击我会跳转另一个登录页面，在登录页面完成登录后会跳转会之前的页面，现在希望跳转回来后，登录按钮消失，html代码怎么实现

htmljavascript简单随机抽选选中加关闭两个按钮

vue2项目结合ant-design-vue组件库实现表格的可编辑行功能，表格中的数据都是后端接口获取的，点击编辑按钮，编辑按纽消失变保存和取消，点击保存按钮，保存修改之后的数据，点击取消，恢复到修改之前的数据

el-form设置校验change，值改变后校验结果未消失

使用EL表达式和JSTL实现将文本框中的内容输出到页面的功能，在此页面的文本框中输入内容，单击页面提交按钮之后，输入框以及按钮消失，文本框中输入的内容显示到页面。

写一个HTML小游戏

css实现 当鼠标移到input的时候，input框出现阴影，当移动到button的时候，input框的阴影消失，button框出现阴影...

input文本输入框

前端代码怎么书写js使得记住密码的框子消失

最新推荐

集团企业数字孪生平台信息化蓝图（应用系统架构、数据架构、IT基础设施与信息安全架构、信息化组织与管控.pptx

基于微信小程序的助农扶贫小程序

node-v6.9.1.tar.xz

基于matlab开发的多元散射校正和变量标准化Matlab处理程序，可以对建模前的原始数据进行校正、处理.rar

吉林大学离散数学2笔记 自用.pdf

RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz

管理建模和仿真的文件

：YOLOv1目标检测算法：实时目标检测的先驱，开启计算机视觉新篇章

info-center source defatult

c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf

html 输入框变红色,input输入框输入错误时，点击注册按钮，输入框的边框变成红色，重新输入时，边框颜色恢复原来的，同时错误提示消失？...

css实现当鼠标移到input的时候，input框出现阴影，当移动到button的时候，input框的阴影消失，button框出现阴影...

吉林大学离散数学2笔记自用.pdf