Cannot .removeClass using $(this).next() – jQuery

Question

The problem seems to be that you are trying to use .val() on the div, but it needs to be .text().

You can use var $val = $(this).val() || $(this).text(); it will detect if it will be .val() or .text()

Demo

$(document).ready(function() {
  checkInput();
})

$('.mandatory').on('input change', checkInput)

function checkInput() {
  $('.mandatory').each(function() {
    var $val = $(this).val() || $(this).text()
    if ($val == '') {
      $(this).addClass('invalid');
    } else {
      $(this).next().removeClass("invalid");
      $(this).removeClass('invalid')
    }
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">

<p class="lead emoji-picker-container"></p>

<textarea name="title" id="title" class="form-control mandatory" rows="3" placeholder="Type your answer here" data-emojiable="converted" data-emoji-input="unicode" style="height: 100px; display: none;" data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df" data-type="original-input"></textarea>

<div class="emoji-wysiwyg-editor form-control mandatory" data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df" data-type="input" placeholder="Type your answer here" contenteditable="true" style="height: 100px;" spellcheck="false"></div>


</div>

Leave a Comment Cancel Reply