Как убрать сообщение об ошибке после успешного входа

Question

У меня есть страница входа, где я могу получить имя пользователя и пароль через API. После успешного входа также отображается сообщение об ошибке, как удалить. Вот моя скрипка . Помогите как убрать сообщение об ошибке после успеха. Если пароль неверный, должно появиться сообщение об ошибке.

HTML

<form id="login">
                  <p class="text-danger d-none">Please enter a correct login and password.</p>
                  <div class="form-group pb-10">
                      <div class="input-group">
                         <div class="input-group-addon p-2">
                            <i class="fa fa-user icon"></i>
                         </div>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Username" required>
                     </div>
                  </div>
                   <div class="form-group">
                      <div class="input-group">
                         <div class="input-group-addon p-2">
                            <i class="fa fa-lock icon"></i>
                         </div>
                       <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                     </div>
                  </div>

                  <div>

                  <button type="submit" class="btn float-right login-btn">Login</button>
                </div>
               </form>

Сценарий:

 $(document).ready(function(){
    localStorage.removeItem('role');
    $(".login-error").hide();
    $("#login").on("submit", function (e) {
     e.preventDefault();
    var form_data = $('#login').serialize();
    var username=$("#name").val();
    var pwd=$("#password").val();
       $.ajax({
          url: "https://api.myjson.com/bins/nl8a0",
          type: "GET",
          dataType: "json",
          success: function (data) {
                console.log(typeof(data));
             var arr = data;
                arr.forEach(function(obj) {
                   console.log('name: ' + obj.name);
                   console.log('password: ' + obj.role);
                   var pass=obj.password; 
                   // var decryptedBytes = CryptoJS.AES.decrypt(obj.password, "password");
                   var bytes  = CryptoJS.AES.decrypt(pass.toString(), 'password');
                   var plaintext = bytes.toString(CryptoJS.enc.Utf8);
                   var role=obj.role;
                      if(role=="User"){
                         if(username==obj.name && pwd==plaintext){
                         alert("New role");
                         }
                         else{
                            $("#login p").removeClass("d-none");
                         }
                      }
                      else{
                   if(username==obj.name && pwd==plaintext){
                   alert("Login succes");
                   }
                   else{
                      $("#login p").removeClass("d-none");
                   }
                }
                })
          },
             error: function(data) {
             console.log(data);
       }
       });

 });
});

Answer 1

вы пропустили добавление удаленного класса d-none после успешного входа в систему.

 $("#login p").addClass("d-none");

Answer 2

Вы можете назначить контейнер сообщений по идентификатору и назначить сообщение в соответствии с результатом, используя этот идентификатор.
Попробуйте следующий код:

рабочий ключ:
https://jsfiddle.net/ao2sd6e0/

ОБНОВЛЕНИЕ:
Как видите, я добавил id "message" в тег <p> <p class="text-danger d-none" id="message"></p>, чтобы сделать его контейнером сообщения.Используя это id, мы можем вставить сообщение, когда вход в систему будет успешным или нет.

HTML

<div class="container mt-5">

  <div class="d-flex justify-content-center mt-150 height-3 ">
    <div class="p-2 text-white w25 shadow-left rounded-left bg-white">
      <div class="d-flex justify-content-center">
        <img class="img-height img-fluid mt-100" src="../img/logo.png" alt="">
      </div>
      <!-- <h1 class="text-center mt-90">SeedStalk</h1> -->
    </div>
    <div class="border-left nbrd w30 text-center p60 shadow-right rounded-right bg-white">
      <form id="login">
        <p class="text-danger" id="message"></p>
        <div class="form-group pb-10">
          <div class="input-group">
            <div class="input-group-addon p-2">
              <i class="fa fa-user icon"></i>
            </div>
            <input type="text" class="form-control" id="name" name="name" placeholder="Username" required>
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon p-2">
              <i class="fa fa-lock icon"></i>
            </div>
            <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
          </div>
        </div>

        <div>

          <button type="submit" class="btn float-right login-btn">Login</button>
        </div>
      </form>
    </div>
  </div>


  <h6>
    Username : admin<br>
    Password : admin
  </h6>

</div>   

В Javascript мы можем настроить отображение сообщения в теге <p>, используя getElementById() Метод с .innerHTML Свойство HTML.

document.getElementById ('message'). InnerHTML = "Success"

document.getElementById('message').innerHTML = "Please enter a correct login and password"

Сценарий

$(document).ready(function(){
        localStorage.removeItem('role');
        $(".login-error").hide();
        $("#login").on("submit", function (e) {
         e.preventDefault();
        var form_data = $('#login').serialize();
        var username=$("#name").val();
        var pwd=$("#password").val();
           $.ajax({
              url: "https://api.myjson.com/bins/qt7fk",
              type: "GET",
              dataType: "json",

              success: function (data) {
                    console.log(typeof(data));
                 // alert(JSON.stringify(data));
                 var arr = data;
                    arr.forEach(function(obj) {
                       console.log('name: ' + obj.name);
                       console.log('password: ' + obj.role);
                       var pass=obj.password;
                       var bytes  = CryptoJS.AES.decrypt(pass.toString(), 'password');
                       var plaintext = bytes.toString(CryptoJS.enc.Utf8);
                       // alert(plaintext);
                       var role=obj.role;
                          if(role=="User"){
                             if(username==obj.name && pwd==plaintext){
                             alert("New role"); document.getElementById('message').innerHTML = ""

                             }
                             else{
                                document.getElementById('message').innerHTML = "" 
                             }
                          }
                          else{
                       if(username==obj.name && pwd==plaintext){
                       alert("Login succes");
                       document.getElementById('message').innerHTML = " " 
                       }
                       else{
                          document.getElementById('message').innerHTML = "Please enter a correct login and password"
                       }
                    }
                    })
              },
                 error: function(data) {
                 console.log(data);
           }
           });

     });
    });