[英]Remove item from list using jquery
I have been working all day on one of my first javascripts which is designed to have a user insert items into a text box using a field and submit button. 我整天都在研究我的第一个javascript,这是为了让用户使用字段和提交按钮将项目插入文本框。 Items that are put in the list have a remove button next to them.
列表中的项目旁边有一个删除按钮。
I was wondering if anyone had any smart ideas about how I could remove items using the remove link next to the list. 我想知道是否有人对如何使用列表旁边的删除链接删除项目有任何聪明的想法。 When this link is clicked I want to have it removed from the list but I can't really see a clean and simple way of doing it.
单击此链接后,我希望将其从列表中删除,但是我真的看不到一种干净简单的方法。
Demo Jsfiddle: http://jsfiddle.net/spadez/ZTuDJ/46/ 演示Jsfiddle: http : //jsfiddle.net/spadez/ZTuDJ/46/
// If JS enabled, disable main input
$("#responsibilities").prop('disabled', true);
// $("#responsibilities").addClass("hidden");
// If JS enabled then add fields
$("#resp").append('<input placeholder="Add responsibility" id="resp_input" ></input><input type="button" value="Add" id="add"> ');
// Add items to input field
var eachline='';
$("#add").click(function(){
var lines = $('#resp_input').val().split('\n');
var lines2 = $('#responsibilities').val().split('\n');
if(lines2.length>10)return false;
for(var i = 0;i < lines.length;i++){
if(lines[i]!='' && i+lines2.length<11){
eachline += lines[i] + '\n';
}
}
$('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+"<span class='right'><a href='#'>Remove</a></span></li>");
$('#resp_input').val('');
});
I know people have much more experience, so if anyone is willing to give me any help or advice on how this could be achieved I would really apprecaite it. 我知道人们有更多的经验,所以如果有人愿意给我任何帮助或建议,我将非常感激。
Really simple : 真的很简单:
$(document).on('click', '.right a', function(){
$(this).closest('li').remove()
})
Fiddle : http://jsfiddle.net/ZTuDJ/47/ 小提琴: http : //jsfiddle.net/ZTuDJ/47/
To remove the textarea too, use this: 要也删除文本区域,请使用以下命令:
$(document).on('click', '.right a', function(){
var el = $(this).closest('li')
var index = $('li').index(el);
var text = eachline.split('\n');
text.splice(index, 1);
eachline = text.join('\n')
$('#responsibilities').text(eachline)
el.remove()
})
Fiddle : http://jsfiddle.net/ZTuDJ/50/ 小提琴: http : //jsfiddle.net/ZTuDJ/50/
Something like this?: 像这样吗?
$("ul li a").on("click", function(){
$(this).parent().remove();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.