I have a "Try Again!" message that appears when the inserted value exists in my dropdown select list, this is my code:

//I am trying to remove this message once the user starts typing again:

    $('#new_day').on('input', function(){
   //Get input value
   var input_value = $(this).val(); 
   
   //Remove disabled from the button
   $('#new_day_save').removeAttr('disabled'); 
   
   //iterate through the options 
   $(".days > option").each(function() {
      //If the input value match option text the disable button
      if( input_value == $(this).text()){
          $('#new_day_save').attr('disabled', 'disabled');
          $('#new_day_save').parent().append("<p id=\"error_message\" style=\"color: red\">Try again !</p>");
      }else{
         $('#new_day_save').parent().remove("#error_message");
      }
   });
});

<script src=".1.1/jquery.min.js"></script>

    <select class="days">
      <option>Monday</option>
      <option>Friday</option>
   </select>
   <p>You have another proposition? Add it to the list.</p>
   <div>
       <input id="new_day" type="text" />
   </div>
   <input id="new_day_save" type="button" value="save new day"/>

I have a "Try Again!" message that appears when the inserted value exists in my dropdown select list, this is my code:

//I am trying to remove this message once the user starts typing again:

    $('#new_day').on('input', function(){
   //Get input value
   var input_value = $(this).val(); 
   
   //Remove disabled from the button
   $('#new_day_save').removeAttr('disabled'); 
   
   //iterate through the options 
   $(".days > option").each(function() {
      //If the input value match option text the disable button
      if( input_value == $(this).text()){
          $('#new_day_save').attr('disabled', 'disabled');
          $('#new_day_save').parent().append("<p id=\"error_message\" style=\"color: red\">Try again !</p>");
      }else{
         $('#new_day_save').parent().remove("#error_message");
      }
   });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <select class="days">
      <option>Monday</option>
      <option>Friday</option>
   </select>
   <p>You have another proposition? Add it to the list.</p>
   <div>
       <input id="new_day" type="text" />
   </div>
   <input id="new_day_save" type="button" value="save new day"/>

• javascript
• jquery
• validation
• input
• removechild

• Where are you trying to remove the message? Something like $('#error_message').remove() ? – David Commented Aug 9, 2017 at 12:07

2 Answers 2

you can just remove the #error_message by adding this to your event handler just before you pare input value to option $('#new_day_save').parent().find('#error_message').remove() and you can remove the else condition.

 $('#new_day').on('input', function(){
   //Get input value
   var input_value = $(this).val(); 

   //Remove disabled from the button
   $('#new_day_save').removeAttr('disabled'); 
$('#new_day_save').parent().find('#error_message').remove();
   //iterate through the options 
   $(".days > option").each(function() {
  //If the input value match option text the disable button
  if( input_value == $(this).text()){
      $('#new_day_save').attr('disabled', 'disabled');
      $('#new_day_save').parent().append("<p id=\"error_message\" style=\"color: red\">Try again !</p>");
  }
   });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <select class="days">
  <option>Monday</option>
  <option>Friday</option>
   </select>
   <p>You have another proposition? Add it to the list.</p>
   <div>
   <input id="new_day" type="text" />
   </div>
   <input id="new_day_save" type="button" value="save new day"/>

This line $('#new_day_save').parent().remove("#error_message"); will remove parent element.

To remove specific element in jQuery, do simply since it's a id selector which is unique element,

$("#error_message").remove();