remove array using jquery

Question

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(){

});

});

Btw, there is no need in JS to prefix all variable names with $ — Bergi
– Bergi, Commented Feb 27, 2013 at 14:50

Bergi · Accepted Answer · 2013-02-27 15:15:20Z

1

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>");

edited Feb 27, 2013 at 15:15

answered Feb 27, 2013 at 14:52

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DrWooolie Over a year ago

the problem with that solution is that it removes everything in my div. I have a h2 " Filmer" which also gets removed.

Tschallacka · Accepted Answer · 2013-02-27 14:49:20Z

0

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

That way rightbar is totally empty.

answered Feb 27, 2013 at 14:49

Tschallacka

28.9k15 gold badges99 silver badges140 bronze badges

3 Comments

Bergi Over a year ago

This is not recommended if you use jQuery.

Tschallacka Over a year ago

It is much faster though than using jquery. When using jquery you are not bound to using jquery exclusively.

Bergi Over a year ago

Yeah, but emptying with jQuery has the sideeffect of removing custom data and cleaning event listeners and co from the removed parts to prevent memory leaks. While of course not necessary everywhere, it still is advisable.

Starx · Accepted Answer · 2013-02-27 14:55:37Z

0

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>");

edited Feb 27, 2013 at 14:55

answered Feb 27, 2013 at 14:51

Starx

79.3k50 gold badges187 silver badges266 bronze badges

1 Comment

DrWooolie Over a year ago

the point is to replace the array. I dont want to remove the whole content, since i have an h2"Filmer" in there.

Collectives™ on Stack Overflow

remove array using jquery

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related