Jquery:如何将图像添加到删除按钮

Jquery: How to add an image to a remove button

本文关键字：添加 删除 按钮 图像 Jquery      更新时间：2023-09-26

我正在做一个类项目，在jquery中创建购物清单。我正在为两个类似的问题而苦苦挣扎。

从图像中可以看出，我有一个"添加"按钮和一个删除"X"，它们的功能都是它们应该的。

我正在尝试将这两个对象替换为我在Adobe Illustrator中创建的图像，第一个是"加+"图标，第二个是"减号-"图标。

任何建议都非常感谢。

购物清单

$(document).ready(function() {
	$("#input-form").submit(function() {
		var newItem = $("#input-item").val();
		if (newItem.length > 0) {
			var listItem = "<li>";
			listItem += "<input type='checkbox'>";
			listItem += "<span>" + newItem + "</span>";
			listItem += "<span class='remove'>X</span>";
			listItem += "</li>";
			$("#items").append(listItem);
		}
		return false;
	})
})
$(document).on("click", ".remove", function() {
	$(this).parent().remove();
})
<body>
	<div id="main">
		<header>
			<h1>Shopping List</h1>
		</header>
		<div id="input">
			<form id="input-form">
				<input id="input-item" type ="text">
				<button type="submit">add</button>
			</form>
		</div>
		<div id="list">
			<ul id="items">
				<!-- Items will go here -->
			</ul>
		</div>
	</div>
</body>

我看到您正在使用<button>标签进行添加，<span>用于删除。在任何情况下，您都可以通过以下方式添加图像：

<button type="submit"><img src="your/image/url"/></button>
<span class="remove"><img src="your/image/url"/></span>
相关文章：