列表的删除和添加（JavaScript）_前端起名困难户

网络 02-07 1365

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { width: 400px; list-style: none; margin: 0 auto; } li { width: 400px; height: 50px; /* background-color: chartreuse; */ border-bottom: 1px solid red; line-height: 50px; } .btn1, .btn2 { float: right; margin-top: 15px; margin-left: 2px; width: 40px; height: 20px; border: none; } .btn1:hover { color: white; } .btn2:hover { color: white; } .btn3 { display: block; width: 80px; height: 20px; margin: 0 auto; background-color: tomato; } </style> </head> <body> <button class="btn3">添加</button> <ul> <li> 列表一 <button class="btn1" style="background-color: pink;">删除</button> <button class="btn2" style="background-color: red;">修改</button> </li> <li> 列表二 <button class="btn1" style="background-color: pink;">删除</button> <button class="btn2" style="background-color: red;">修改</button> </li> <li> 列表三 <button class="btn1" style="background-color: pink;">删除</button> <button class="btn2" style="background-color: red;">修改</button> </li> </ul> </body> <script> var oUl = document.querySelector('ul'); // 添加 var btn3 = document.querySelector('.btn3'); btn3.onclick = function() { var nr = prompt('请输入内容'); // console.log(nr); if (nr) { oUl.innerHTML += '<li>' + nr + '<button class="btn1" style="background-color: pink;">删除</button> <button class="btn2" style="background-color: red;">修改</button></li>' } else if (nr == '') { alert('内容不能为空'); } } // 修改删除 var btns = document.querySelectorAll('button'); // console.log(btns); var e = e || window.event; //兼容IE oUl.onclick = function(e) { if (e.target.innerHTML == '修改') { var newNr = prompt('请输入修改内容'); if (newNr) { oUl.innerHTML += '<li>' + nr + '<button class="btn1" style="background-color: pink;">删除</button> <button class="btn2" style="background-color: red;">修改</button></li>' } else if (newNr == '') { alert('内容不能为空'); } e.target.parentNode.innerHTML = newNr + '<button class="btn1" style="background-color: pink;">删除</button> <button class="btn2" style="background-color: red;">修改</button>'; } else if (e.target.innerHTML == '删除') { e.target.parentNode.remove(); } } </script> </html>