Hide "Enhanced Rich Text" field on DispForm if it is empty

Question

I'm working on the customization of the DispForm and I need to check if the "Enhanced Rich Text" field is empty -> hide, if not empty -> show (column in the DispForm).

I don't have a problem with hiding the field, but I'm struggling with IF statement(to check if the enhanced rich text field is empty or not). Below IF statement works perfectly for the NewForm and the EditForm, but not for DispForm.

$(document).ready(function(){
    if($(".ms-rtestate-field[id^='EnhancedRichTextField']")[0].innerHTML=="
"){
        $("td.ms-formlabel:contains('EnhancedRichTextField')").parent().hide();
    }else{
        $("td.ms-formlabel:contains('EnhancedRichTextField')").parent().show();
    }
    $("td.ms-formlabel:contains('HideCalculatedField1')").parent().hide();
    $("td.ms-formlabel:contains('HideCalculatedField2')").parent().hide();
    $("td.ms-formlabel:contains('HideCalculatedField3')").parent().hide();
    $("td.ms-formlabel:contains('HideCalculatedField4')").parent().hide();

});   

Any idea? I also tried: if($("td.ms-formbody[id^='SPFieldNote']").val()=="")

Many thanks!

Answer 1

IF statement -> check if Enhanced Rich Text field on DispForm is empty -> hide, else -> show

$(document).ready(function(){
  var textField =  $('td.ms-formlabel:contains("EnhancedRichTextField")').siblings(".ms-formbody").text().trim();  
  if(textField.length==0){
        $("td.ms-formlabel:contains('EnhancedRichTextField')").parent().hide();
  }else{
        $("td.ms-formlabel:contains('EnhancedRichTextField')").parent().show();
       }
});  

Answer 2

Here is the javascript solution to hide the td.

document.querySelectorAll('td[id=SPFieldNote]').forEach(function(element){
    var fieldTitleElement = element.previousElementSibling;
    if(fieldTitleElement.innerText.indexOf("EnhancedRichTextField") > -1){
        if(!element.innerText.trim()){
            element.style.display = "none";
        }
    }
});

If you want to hide the whole row (), then you just need to add .parrent to the element while hiding (shown below).

document.querySelectorAll('td[id=SPFieldNote]').forEach(function(element){
    var fieldTitleElement = element.previousElementSibling;
    if(fieldTitleElement.innerText.indexOf("EnhancedRichTextField") > -1){
        if(!element.innerText.trim()){
            element.style.display = "none";
        }
    }
});