удалить массив с помощью jquery

Question

Я создал nestled массивы, которые я затем добавляю в div. Когда я нажимаю кнопку с именем «имя», фильм с заголовком сохраняется в массиве $ titelBetyg, который позже сохраняется в другом массиве $ films. Всякий раз, когда я создаю новый $ titelBetyg, я хочу удалить предыдущие $ фильмы из моего div, прежде чем заменять его новым. Как мне это сделать?

Javascript

$(document).ready(function(){ 

var $films = []; 

$('#name').keyup(function(){ 
      $('#name').css('background-color', 'white'); 
}); 

$('#options').change(function(){ 
      $('#options').css('background-color', 'white'); 
}); 

$("#button").click(function(){ 
    var $titelBetyg = []; 

    var $titel = $('#name').val(); 
    var $betyg = $('#options').val(); 

    if($titel == ""){ 
     $('#name').css('background-color', 'red'); 
     alert("Fail"); 
    } 
    else if($betyg == "0"){ 
     $('#options').css('background-color', 'red'); 
     alert("Fail"); 
    } 
    else{ 

     $titelBetyg.push($titel); 
     $titelBetyg.push($betyg); 
     $films.push($titelBetyg); 

     // here is where i need to remove it before appending the new one 

     $('#rightbar').append("<ul>"); 
     for(i=0; i<$films.length; i++){ 
      $('#rightbar').append("<li>" + $films[i][0] + " " + $films[i][1] + "</li>" + "<br>"); 
     } 
     $('#rightbar').append("</ul>"); 
    } 
}); 

$('#stigande').click(function(a,b){ 

}); 
$('#fallande').click(function(){ 

}); 

}); 

Answer 1

Используйте .empty(), как это (и добавить к <ul> вместо чего-то другого):

var $ul = $("<ul>"); 
for (var i=0; i<$films.length; i++) { 
    $ul.append("<li>" + $films[i][0] + " " + $films[i][1] + "</li><br>"); 
} 
$('#rightbar').empty().append($ul); 

BTW, это может быть легче только добавить новый один вместо опорожнение и восстановление вся вещь:

$('#rightbar ul').append("<li>" + $titel + " " + $betyg + "</li><br>"); 

---

Для того, чтобы удалить только содержимое списка (и ничего больше) от #rightbar, вы могли бы использовать это:

var $ul = $('#rightbar ul').empty(); 
if (!$ul.length) // if nonexistent… 
    $ul = $("<ul>").appendTo('#rightbar'); // create new one 


for (var i=0; i<$films.length; i++) 
    $ul.append("<li>" + $films[i][0] + " " + $films[i][1] + "</li>"); 

Answer 2

document.getElementById('rightbar').innerHTML = ''; 

Таким образом rightbar совершенно пуст.

Answer 3

Вам требуется только удалить содержимое контейнера. Таким образом, использовать .empty() функцию

$('#rightbar').empty().append("<ul>"); //It will empty the content and then append 
for(i=0; i<$films.length; i++){ 
    $('#rightbar').append("<li>" + $films[i][0] + " " + $films[i][1] + "</li>" + "<br>"); 
} 
$('#rightbar').append("</ul>");