Element value inside Bootstrap accordion doesn't validate empty - html

Question

I have some cards dynamically generated with a loop. In one part, I have an accordion element that is triggered with a button (Bootstrap method). I change the background color of that button when the element accordion-body, which is contenteditable true, has value in it after losing focus. The problem is, I want to remove the button color if the accordion-body is empty, but the element accordion-body seems to still have a value after losing focus even when the user deletes all content.
This is the accordion code:
Why is it that $(this).val() never evaluates empty? I had a console message in the if statements, it never goes to the else validation.
$('.accordion-body').on('focusout', function() {
var style = $(this).closest('.accordion-item').find('button[id=infobtn]').attr('style');
//it will return string
style += ';background-color: #f4cccc;';
if ($(this).val() != '') {
$(this).closest('.accordion-item').find('button[id=infobtn]').attr('style', style);
} else {
$(this).closest('.accordion-item').find('button[id=infobtn]').attr('style');
}
});
<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<span class="mySpan">
<div class="accordion accordion-flush py-0" id="accordionFlushExampleOne">
<div class="accordion-item py-0">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" id="infobtn" name="infobtn" style="height:25px; <?php if (!empty($additionalInfo)) echo " background-color: #f4cccc; " ?>" type="btn btn-sm" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne>" aria-expanded="false"
aria-controls="flush-collapseOne">Additional Info
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExampleOne">
<div class="accordion-body fw-bold" id="additionalInfo" name="additionalInfo" contenteditable="true">
<?php echo "$additionalInfo" ?>
</div>
</div>
</div>
</div>
</span>

Answer 1

Giving HTML block elements the attribute contenteditable="true" is responsible for that behaviour.
Removing the content of such an element in the browser, will set a replacement <br> instead in there.
Thus, if ($(this).val() != '') will never be true, because your containing element will never be empty.
Changing the containing div to an inline element such as span fixes the issue and your conditonal logic will get to work.
HTML - swap <div> with <span>
<span class="accordion-body fw-bold" id="additionalInfo" name="additionalInfo" contenteditable="true">
<?php echo "$additionalInfo" ?>
</span>
HTML & JQuery - inner <span> within <div> to preserve bootstrap accordion design
<div class="accordion-body fw-bold" id="additionalInfo" name="additionalInfo" contenteditable="true">
<span contenteditable="true">
<?php echo "$additionalInfo" ?>
</span>
</div>
$('.accordion-body span').on('focusout', function() {...

Answer 2

Thanks for all the recommendations and information about this matter. #bitski suggestion took me to the right direction. I tried all the options given, and somehow my accordion-body element always received the <br> value, it was never empty. I did some research and found a way to reset the content after losing focus (I ended up using blur instead).
So my accordion-body field looks like this now:
<div class="accordion-body fw-bold" id="additionalInfo" name="additionalInfo" contenteditable="true" onblur="event.target.scroll(0,0)">
And my jquery looks like this:
$('.accordion-body').on('blur', function() {
var style = $(this).closest('.accordion-item').find('button[id=infobtn]').attr('style'); //it will return string
style += ';background-color: #f4cccc;';
if ($(this).text().trim().length != 0) {
$(this).closest('.accordion-item').find('button[id=infobtn]').attr('style', style);
} else {
style += ';background-color: #FFFFFF'; //When field is empty, change the button background color back to white
$(this).closest('.accordion-item').find('button[id=infobtn]').attr('style', style);
}
});
That did the trick! Hope this helps someone else.