February 27, 2013

remove array using jquery

Question by DrWooolie

I have created nestled arrays, which I then append to a div. When i click the button with id “name”, a movie with title is stored in an array $titelBetyg, which is later stored in another array $films. Whenever i create a new $titelBetyg, i want to remove the previous $films from my div, before replacing it with the new one. How do I do this?

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 by Bergi

Use .empty() like this (and append to the <ul> instead of something else):

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, it might be easier to only append the new one instead of emptying and rebuilding the whole thing:

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

To remove only the list contents (and nothing else) from the #rightbar, you could use this:

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 by Starx

You only require to remove the content of the container. So, use the .empty() function

$('#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>");

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!