Удалить элемент из списка с помощью jquery

Я работаю весь день на одном из моих первых javascripts, который предназначен для ввода элементов пользователя в текстовое поле с помощью кнопки «Поле» и «Отправить». Элементы, помещенные в список, имеют кнопку удаления рядом с ними.Удалить элемент из списка с помощью jquery

Мне было интересно, есть ли у кого-нибудь умные идеи о том, как я могу удалить элементы, используя ссылку удаления рядом со списком. Когда эта ссылка будет нажата, я хочу удалить ее из списка, но я не могу увидеть чистый и простой способ сделать это.

Demo 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(''); 
});

Я знаю, что люди имеют гораздо больше опыта, так что если кто-то готов дать мне любую помощь или совет о том, как это может быть достигнуто, я бы действительно apprecaite его.

источник

2013-06-18 James Willson

Очень просто:

$(document).on('click', '.right a', function(){ 
    $(this).closest('li').remove() 
})

Fiddle: http://jsfiddle.net/ZTuDJ/47/

Чтобы удалить текстовое поле тоже, используйте:

$(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/

источник

2013-06-18 20:26:20

Karl Я сожалею, чтобы быть придирчивым, но не могли бы вы сказать мне, как удалить его из текстовой области тоже? Он только удаляет его из списка, но сохраняет его в текстовой области, когда в идеале это должно быть синхронизировано. –

Позвольте мне немного времени для этого;) –

@JamesWillson Отредактировав мой ответ, посмотрите –

Нечто подобное ?:

$("ul li a").on("click", function(){ 
    $(this).parent().remove(); 
});

JSFiddle here

источник

2013-06-18 20:25:50

Удалить элемент из списка с помощью jquery

ответ

Смежные вопросы