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

我正在研究一个类项目，以在jquery中创建一个购物列表。我正在努力解决两个类似的问题。你可以从图像中看到，我有一个“添加”按钮和一个删除“X”，这两个功能都是他们应该的。Jquery：如何将图像添加到删除按钮

我试图用我在Adobe Illustrator中创建的图像替换这两个对象，第一个是“plus +”图标，第二个是“minus - ”图标。

任何意见是非常感谢。

$(document).ready(function() { 
 

 
\t $("#input-form").submit(function() { 
 
\t \t var newItem = $("#input-item").val(); 
 

 
\t \t if (newItem.length > 0) { 
 

 
\t \t \t var listItem = "<li>"; 
 
\t \t \t listItem += "<input type='checkbox'>"; 
 
\t \t \t listItem += "<span>" + newItem + "</span>"; 
 
\t \t \t listItem += "<span class='remove'>X</span>"; 
 
\t \t \t listItem += "</li>"; 
 

 
\t \t \t $("#items").append(listItem); 
 
\t \t } 
 
\t \t return false; 
 
\t }) 
 

 
}) 
 

 
$(document).on("click", ".remove", function() { 
 
\t $(this).parent().remove(); 
 
})

<body> 
 
\t <div id="main"> 
 
\t \t <header> 
 
\t \t \t <h1>Shopping List</h1> 
 
\t \t </header> 
 
\t \t <div id="input"> 
 
\t \t \t <form id="input-form"> 
 
\t \t \t \t <input id="input-item" type ="text"> 
 
\t \t \t \t <button type="submit">add</button> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t \t <div id="list"> 
 
\t \t \t <ul id="items"> 
 
\t \t \t \t <!-- Items will go here --> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
</body>

来源

2016-03-01 Roger Corbett

[与使用jQuery一个图像按钮更换一个提交按钮]的可能的复制（http://stackoverflow.com/questions/3202075/replacing-a-submit：在任何情况下，你可以通过添加图片 - 按钮上带有一个图像按钮-使用-jquery的） –

我看到你正在使用的附加<button>标签和<span>为删除。

<button type="submit"><img src="your/image/url"/></button> 
<span class="remove"><img src="your/image/url"/></span>

来源

2016-03-01 22:09:29 Anubhab

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

回答

相关问题