jQuery动态完成CURD操作
成果要求代码展示成果要求
代码展示
<!DOCTYPE html><html lang="zh_CN"><head><meta charset="UTF-8"><title>Title</title><script src="../jQuery/jquery-3.6.0.min.js"></script><script>$(function (){//增加联系方式按钮事件$("#btn_add").click(function (){var div2=$("<div>");div2.append($("<label>电话</label>"));div2.append($("<input type='text' />"));//增加一个行内删除按钮var btn_divdel=$(" <input type='button' value='删除' />");//行内删除按钮事件btn_divdel.click(function (){$(this).parent().remove();})div2.append(btn_divdel);$("#div1").append(div2);})//外部删除按钮事件$("#btn_del").click(function (){$("#div1").children().remove();})//外部清空按钮事件$("#btn_clean").click(function (){$("#div1").empty();})})</script></head><body><input type="button" value="父元素" id="btn_fa"><input type="button" value="增加一个按钮" id="btn_addbtn"/><input type="button" value="删除" id="btn_del"><input type="button" value="清空" id="btn_clean"><input type="button" value="增加联系方式" id="btn_add"><input type="button" value="替换" id="btn_rep"><div style="width: 400px;height: 400px;background-color: aqua" id="div1"></div></body></html>
