CODEWITHSUNDEEP
javascripthtmljquery
lStoilov
lStoilov

Reputation: 1339

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

I am having a textarea which border is colored as red if it is empty. I have emoji picker installed on the textarea, which adds a div to hold the picker.

The automatically created div is just right after the textarea and what I am trying to achieve to remove the red border a soon as the user type something.

The script that I have works fine for the textarea itself but does not remove it from the div that holds the emoji picker

This is what I have

<div class="form-group">

<p class="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>

and this is the jQuery

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

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

    function checkInput()
    {
        $('.mandatory').each(function() {
            if ($(this).val() == '') {

                $(this).addClass('invalid');
                
                } else {
                    $(this).next().removeClass("invalid");
                    
                $(this).removeClass('invalid')}
        })
    }

I have tried everything I could think of.... next(), prev(), nextAll()... Also tried to use $('#emoji-wysiwyg-editor').next(), which removes it, but if I have more than one textarea with emoji picker, it removes it everywhere

Also, tried searching here and the ideas here also did not work. jquery next and this not working

One thing that is unique for each textarea and respectively for the created div is the data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df" maybe could be used as a selector but, don't know how to approach it.

This is the emojipicker http://onesignal.github.io/emoji-picker/demo/

and this is a fiddle showing the problem https://jsfiddle.net/largan/3d7bkwg9/11/

Upvotes: 0

Views: 54

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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>

Upvotes: 3

Related Questions