jQuery - why show parent doesn't trigger the display of children?

Question

Hello all,

  <div id="regWarnMsg">Hello world.
    <span id="closeerrordiv"><a>×</a></span>
  </div>

jQuery

  $('#closeerrordiv').click(function() {
      $(this).parent().animate({opacity: 0}, 'slow', function() {
        $('#regWarnMsg').slideUp('slow');
      });
  });   


  $('#regWarnMsg').text(responseText.msg);
  $('#regWarnMsg').show('slow');

When the user clicks #closeerrordiv, the #regWarnMsg is closed.

Q1> Later, I need to force to show the #regWarnMsg. I don't know why the child (i.e. #closeerrordiv) of #regWarnMsg doesn't show up at the same time.

Q2> Why the text doesn't show up either?

Thank you

Answer 1

When you call .text you are replacing the current Hello world in #regWarnMsg with your responseText.msg. It is also removing everything including your span and the anchor tag within it.

You can try something like this:

<div id="regWarnMsg">
    <span id="errorText">Hello world.</span>
    <span id="closeerrordiv"><a>×</a></span>
  </div>

jQuery

    $('#closeerrordiv').click(function() {
          $(this).parent().animate({opacity: 0}, 'slow', function() {
            $('#regWarnMsg').slideUp('slow');
          });
      });   


  $('#errorText').text(responseText.msg);
  $('#regWarnMsg').show('slow');

You are now only replacing the text within #errorText, which will keep the closing anchor tag in place.