<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品牌列表</title>
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="max">
<div class="head">
<div class="write">添加品牌</div>
</div>
<div class="head2">
<span>ID:</span>
<input type="text" name="" id="txt">
<span class="span2">品牌名称:</span>
<input type="text" name="" id="txt1">
<input type="button" name="" value="添加" class="btn" id="btn">
</div>
</div>
<div class="min">
<ul id="list" class="list">
<li class="li">ID</li>
<li class="li-1">品牌名称</li>
<li class="li-2">操作（Operation）</li>
<li class="li-3">1</li>
<li class="li-4">奔驰</li>
<li class="li-5">
<a href="#" class="del">删除</a>
</li>
</ul>
</div>
</body>
</html>
-
导入JS
$(function () { $('#btn').click(function () { var txt = $('#txt').val() && $('#txt1').val(); var $li = $('<li class="li-3">' + txt + '</li>\n' + ' <li class="li-4">' + txt + '</li>\n' + ' <li class="li-5">\n' + ' <a href="#" class="del">删除</a>\n' + ' </li>'); if (txt == '') { alert('请输入内容'); return; } $li.appendTo('#list') }); /* $('.del').click(function () { $(this).parent().remove(); })*/ $('#list').delegate('a', 'click', function (event) { var handler = $(this).attr('class'); switch (handler) { case 'del': $(this).parent().remove(); break; } }) });
网友评论