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

}

Pyonephritis

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? – Lachlan

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 – Pyonephritis

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.

Unconformable

Answer 2

Check the children length.

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

Bozo

.children() won't return text nodes. – Altar

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

Altar

Answer 4

Try

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

Sirup

Answer 5

Plain Vanilla JavaScript should do the trick too.

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

Apprise

Answer 6

Do it like this:

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

Brassbound