How to check if element has HTML in it before removing? jQuery

Question

in a function I need to check if a (div, span, p) contains any .html elements in it before attempting to remove the html and add in new content.

Not sure how to do this...

I tried this, but not working:

// HERE below I tried to do a check to see if the div's have HTML, but did not work
    if ($('.'+rowName+' div').html) {
        $('.'+rowName+' div').html.remove();
        $('.'+rowName+' span').html.remove();
        $('.'+rowName+' p').html.remove();
    }

Full function

// Create the Role / Fan rows
function rowMaker (rowName, roleName) {
    //alert(rowName+' '+roleName);

    // HERE below I tried to do a check to see if the div's have HTML, but did not work
    if ($('.'+rowName+' div').html) {
        $('.'+rowName+' div').html.remove();
        $('.'+rowName+' span').html.remove();
        $('.'+rowName+' p').html.remove();
    }

    // Blue button
    $('.'+rowName+' div').append(roleName);
    $('.'+rowName+' div').attr('id', 'blue-fan-'+roleName); 
    var blueButton = ('blue-fan-'+roleName);
    console.log('blueButton = '+blueButton);

    // Genres
    $('.'+rowName+' span').append(roleType);

    // Tags
    $.each(role_Actor, function(index, item) {
        $('.'+rowName+' p').append(item+', ');
    });

    $('#'+blueButton).click(function () {

        console.log('clicked blue button');

        // clears the role_Actor to be used to recapture checkboxes
        role_Actor = [];

        console.log('role_Actor = '+role_Actor);

        //$('#modal-'+roleId).modal();
        $('#modal-'+roleId).modal({persist:true});
        return false;
    });

}

Does it really matter if the element has HTML if you're just going to remove it? Why not just replace the contents entirely with [`.html`](http://api.jquery.com/html)? — Andrew Whitaker, Apr 05 '13 at 02:27
Oh because somethings the user will hit that button, launch the function and the blue button hasn't been created yet... so there isn't any .html to remove and throws and error on the console :( maybe instead of remove is there some sort of clear call I can make? hmm looking now — Leon Gaban, Apr 05 '13 at 02:28

Ram · Accepted Answer · 2013-04-05T04:17:00.703

html is a method not a property, you need to use (), then you can use length property of String object for checking the length of the returned html string:

if ( $.trim( $('.'+rowName+' div').html() ).length ) {
    // $('.'+rowName).find('div, p, span').remove();
    $('.'+rowName).find('div, p, span').empty();
}

Note that if you want to change the HTML content of an element, there is no need to remove the current html content of it. html method overrides the current html content.

score 6 · Answer 2 · answered Apr 05 '13 at 02:29

6

Check the children length.

if($('.'+rowName+' div').children().length > 0)

answered Apr 05 '13 at 02:29

msapkal

8,268
2
31
48

2

`.children()` won't return text nodes. – jmar777 Apr 05 '13 at 02:31

score 2 · Answer 3 · answered Apr 05 '13 at 02:30

2

You can use .html() for this (and accounting for whitespace):

var $row = $('.rowName');

if (!$row.find('div').html().trim().length) {
    $row.find('div, span, p').empty();
}

answered Apr 05 '13 at 02:30

jmar777

38,796
11
66
64

score 1 · Answer 4 · answered Apr 05 '13 at 02:30

1

Try

if ($('.'+rowName+' div').html().length > 0) {
        $('.'+rowName+' div').empty();
        $('.'+rowName+' span').empty();
        $('.'+rowName+' p').empty();
}

answered Apr 05 '13 at 02:30

Tamil Selvan C

19,913
12
49
70

score 0 · Answer 5 · answered Dec 22 '15 at 09:14

0

Plain Vanilla JavaScript should do the trick too.

if(document.querySelectorAll('.'+rowName+' div')[0].childElementCount > 0){
  console.log("found");
}

answered Dec 22 '15 at 09:14

vorillaz

6,098
2
30
46

score 0 · Answer 6 · edited Jan 19 '20 at 19:35

0

Do it like this:

var elementExists = $('.'+rowName+' div').html();
if (elementExists) { ... }

edited Jan 19 '20 at 19:35

Leon Gaban

36,509
115
332
529

answered Jan 18 '20 at 17:10

Ingo

5,239
1
30
24

How to check if element has HTML in it before removing? jQuery

6 Answers6