JQuery Append и удаление

Question

Я пытаюсь использовать это JQuery, чтобы добавить некоторые HTML, а затем unappend его

if(!(jQuery(check).hasClass('selected'))){ 
    jQuery(this).append('<span class="selected">&nbsp;</span>'); 
    }  

Как я могу это сделать, а также жить обновлять? Я просто пытаюсь добавить этот элемент, когда пользователь «нажимает» или «выключен»?

i.e, если у чека нет класса «Selected» - append - else remove?

Answer 1

Поскольку ваш вопрос был своего рода расплывчатым и отсутствовал разметкой, я использовал базовый пример флажка для демонстрации. Я включил ссылку на демо в jsFiddle here

HTML:

<input type="checkbox" id="test" /> Check me 

<div id="items"></div> 

JavaScript:

$("#test").bind('click', function(){ 

    var $t = $(this); 

    if($t.is(':checked')){ 
    // append item 
    $('#items').append('<span class="selected">I was recently appended.</span>'); 
    }else{ 
    // empty div and remove it from DOM (empty helps with memory leak issues with remove()) 
    $('span', '#items').empty().remove(); 
    } 
}); 

Answer 2

jQuery('#check').click(function() { 
    var check = jQuery(this); 

    if (!check.hasClass('selected')) { 
     jQuery('#mydiv').append('<span class="selected">&nbsp;</span>'); 
     check.addClass('selected'); 
    } else { 
     jQuery('#mydiv span.selected').remove(); 
     check.removeClass('selected'); 
    } 
}); 

Answer 3

Я думаю, вам не нужно добавлять там тэг span. , тогда код может быть коротким.

$("#check").click(function(){ 
    $(this).hasClass('selected') ? $(this).removeClass('selected') : $(this).addClass('selected'); 
}); 

Answer 4

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

// Appending 
var ele = $('<span>', { 
    html: 'nbsp;', 
    class: 'selected' 
}).appendTo(container); 

// Removing 
ele.remove(); 

Если вы делаете это из обработчика событий, переменная ele должна быть определена во внешнем объеме, так что она доступна после этого. Для нескольких элементов:

// Appending 
var ele = []; 
ele.push($('<span>', { 
    html: 'nbsp;', 
    class: 'selected' 
}).appendTo(container)); 

// Removing 
for(var i = 0; i < ele.length; i++){ 
    ele[i].remove(); 
} 

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