javascript 如何在删除之前检查元素中是否包含 HTML？jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15824886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to check if element has HTML in it before removing? jQuery
提问by Leon Gaban
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.
在尝试删除 html 并添加新内容之前，我需要在函数中检查 (div, span, p) 中是否包含任何 .html 元素。
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;
});
}
回答by undefined
htmlis a method not a property, you need to use (), then you can use lengthproperty of String object for checking the length of the returned html string:
html是一个方法而不是一个属性，你需要使用()，那么你可以使用lengthString对象的属性来检查返回的html字符串的长度：
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. htmlmethod overrides the current html content.
请注意，如果要更改元素的 HTML 内容，则无需删除该元素的当前 html 内容。html方法覆盖当前的 html 内容。
回答by Mahesh Sapkal
Check the children length.
检查孩子的长度。
if($('.'+rowName+' div').children().length > 0)
回答by jmar777
You can use .html()for this (and accounting for whitespace):
您可以.html()为此使用（并考虑空格）：
var $row = $('.rowName');
if (!$row.find('div').html().trim().length) {
$row.find('div, span, p').empty();
}
回答by Tamil Selvan C
Try
尝试
if ($('.'+rowName+' div').html().length > 0) {
$('.'+rowName+' div').empty();
$('.'+rowName+' span').empty();
$('.'+rowName+' p').empty();
}
回答by vorillaz
Plain Vanilla JavaScript should do the trick too.
普通的 Vanilla JavaScript 也应该可以解决这个问题。
if(document.querySelectorAll('.'+rowName+' div')[0].childElementCount > 0){
console.log("found");
}
回答by Ingo
Do it like this:
像这样做：
var elementExists = $('.'+rowName+' div').html();
if (elementExists) { ... }
