If a div inside of a div is empty change the background color of the parent CSS

Question

I am trying to check if status_comment_holder is empty and if it is then I want to change the background of comment-container without having to refresh the page, at the moment, I am appending comments to status_comment_holder and removing the comment when they remove their comment, I am not too sure if I can do this with css or jquery so I have marked tags for both.

<div class="well well-small comment-container" id="comment-container"">
  <div class="status_comment_holder" id="image_comment"></div>
</div>

I have tried:

if($('#image_comment').is(':empty')){
    alert("fhfhf");
    $('.well').css('background-color', '#ffffff');
}

With no avail, it's not even alerting for some reason.

@Ashot Khanamiryan that was just a type when writing down on here. — , Jan 28 '16 at 13:42
`.is(":empty")` returns true only if node is **completely empty** (even without line breaks). Note that an empty `
` if no other style is applied (`margin`, `padding`, `height`, `min-height` and so on) has 0 pixel height and is then invisible. Also note that same may be done with CSS (as Aaron answer - now deleted - shown). — Adriano Repetti, Jan 28 '16 at 13:46

score 0 · Answer 1 · answered Jan 28 '16 at 13:51

Just select by pseudo-selector in jquery than use closest.

$(".status_comment_holder:empty")
  .closest(".well")
  .css("background-color", "red");

.well {
  height: 1.2em;
  background-color: green;
  margin: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well well-small comment-container">
  <div class="status_comment_holder"></div>
</div>

<div class="well well-small comment-container">
  <div class="status_comment_holder">Should be Green</div>
</div>

Rounin · Answer 2 · 2016-01-28T14:06:10.803

Here's one solution using plain vanilla javascript:

function checkText() {

var imageComment = document.getElementById('image_comment');
var commentContainer = document.getElementById('comment-container');

if (imageComment.textContent.length === 0) {
    commentContainer.style.backgroundColor = 'rgb(255,0,0)';
}

else {
    commentContainer.style.backgroundColor = 'rgb(191,191,191)';
}

}

var imageComment = document.getElementById('image_comment');
imageComment.addEventListener('input',checkText,false);

#comment-container {
width:400px;
height:100px;
padding:25px;
background-color: rgb(191,191,191);
}

#image_comment {
height:48px;
line-height:48px;
padding:12px;
font-size:48px;
background-color: rgb(255,255,255);
}

<div class="well well-small comment-container" id="comment-container">
<div class="status_comment_holder" id="image_comment" contenteditable="true">Delete this text...</div>
</div>

score -1 · Answer 3 · answered Jan 28 '16 at 13:40

-1

Please use this:

if ( $('#image_comment').text().length == 0 ) {
    alert("fhfhf");
    $('.well').css('background-color', '#ffffff');
}

answered Jan 28 '16 at 13:40

Atif Tariq

2,351
23
33

score -1 · Answer 4 · answered Jan 28 '16 at 13:47

-1

$(document).ready(function() {
    if($('#image_comment').is(':empty')){
       alert("fhfhf");
       $('.well').css('background-color', '#ffffff');
    }
});

You can see jsfiddle

answered Jan 28 '16 at 13:47

Ashot Khanamiryan

1,096
9
17

score -1 · Accepted Answer · edited May 23 '17 at 11:44

-1

Check this out: How do I check if an HTML element is empty using jQuery?

Your idea seems to be fine enough, maybe the div actually has a whitespace inside? you could try something like

if($.trim($("selector").html())=='')

or, as Adriano Repetti said in the comments:

if($("selector").children().length == 0)

which is more CPU-efficient

Hope it helps!

edited May 23 '17 at 11:44

Community

1
1

answered Jan 28 '16 at 13:48

Sebastianb

1,790
21
27

score -1 · Answer 6 · answered Jan 28 '16 at 13:48

-1

Search for functions/DOM like change(function()) , keyup(function()) , text()

Hope you will get an answer for what your are looking.

answered Jan 28 '16 at 13:48

Sumit Sahay

481
4
21

If a div inside of a div is empty change the background color of the parent CSS

6 Answers6