如何在删除元素之前检查其中是否包含HTML？jQuery

Question

在一个函数中，我需要检查一个(div、span、p)是否包含任何.html元素，然后再尝试删除html并添加新内容。

不确定该如何实现...

我尝试了这个方法，但没有起作用:

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

完整功能

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

}

- Leon Gaban

---

如果你只是要删除元素，那么它是否真的很重要有HTML呢？为什么不直接用.html替换整个内容呢？ - Andrew Whitaker

哦，因为有些情况下用户会点击那个按钮，启动函数，但蓝色按钮还没有被创建...所以没有任何 .html 可以移除，在控制台上会抛出错误 :( 或许我可以使用一些清除调用来代替移除？嗯，现在正在寻找。 - Leon Gaban

Answer 1

html并不是一个属性，而是一种方法，您需要使用()，然后可以使用String对象的length属性来检查返回的HTML字符串的长度:

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

请注意，如果您想更改元素的HTML内容，无需删除当前的HTML内容。 html 方法会覆盖当前的HTML内容。

- Ram

Answer 2

检查子元素的数量。

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

- msapkal

---

.children() 不会返回文本节点。 - jmar777

Answer 3

您可以使用.html()来实现此功能（并考虑空格）：

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

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

- jmar777

Answer 4

尝试

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

- Tamil Selvan C

Answer 5

纯粹的JavaScript也可以解决问题。

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

- vorillaz

Answer 6

像这样做：

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

- Ingo