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

}

Answer 1

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.

Answer 2

Check the children length.

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

Answer 3

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();
}

Answer 4

Try

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

Answer 5

Plain Vanilla JavaScript should do the trick too.

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

Answer 6

Do it like this:

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