<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>游戏推荐 </title> <style type="text/css" > *{ margin:0px; padding:0px; font-size:12px; } #listbox{ margin:10px; padding:15px; border:1px solid #CCCCCC; color:#0066FF; } dl{ display:block; float:left; margin:15px; } dd{ font-size:14px; color:#663300; } dd a{ text-decoration:none; font-size:14px; color:#FF3300; } dd a:hover{ text-decoration:underline; } .clear{ clear:both; height:0px; } </style> </head> <body> <div id=‘listbox‘> <dl> <dt><img width="103px" height="123px" src="images/p1.jpg" /></dt> <dd>街机三国</dd> <dd><a class=‘del‘ href=‘javascript:void(0);‘>删除</a></dd> </dl> <dl> <dt><img width="103px" height="123px" src="images/p2.jpg" /></dt> <dd>霸域</dd> <dd><a class=‘del‘ href=‘javascript:void(0);‘>删除</a></dd> </dl> <dl> <dt><img width="103px" height="123px" src="images/p3.jpg" /></dt> <dd>斗破乾坤</dd> <dd><a class=‘del‘ href=‘javascript:void(0);‘>删除</a></dd> </dl> <div class=‘clear‘></div> <input type="button" value=‘新增游戏‘ class=‘add‘/> </div> </body> <script src="../jQuery-v-3.6.0.js"></script> <script> // 遇到的问题：自己添加的游戏不能进行删除。 // 原因分析：文档加载完毕后，并没有响应的结点，因此也就不会被绑定事件。 // 解决方法：使用on方法来改进click事件。 $(".add").click(function(){ var tupian=Math.floor(Math.random()*4+1); var name=new Array("街机三国","斗破乾坤","霸域","大航海家"); var r=Math.floor(Math.random()*4); var names=name[r]; $("#listbox dl:last").after( ‘<dl>‘+ ‘<dt><img width="103px" height="123px" src="images/p‘ + tupian +‘.jpg" /></dt>‘+ ‘<dd>‘+names+‘</dd>‘+ ‘<dd><a class="del" href="javascript:void(0);">删除</a></dd>‘+ ‘</dl>‘ ) }) //通过on将事件绑定到body，这样对于新添加的元素也同样适用。 $("body").on(‘click‘,‘.del‘,function(){ $(this).parent().parent().remove(); }) </script> </html>
原文：https://www.cnblogs.com/j99426/p/15210836.html