How to access appended element and remove it?

I've done quite a bit of research for this but can't get my mind around it.

There is a parent div .container. Which has numerous child divs having different text inside them. There are two buttons outside the .container. One is used to dynamically create and append a child element having particular text. Other is to remove a child div having particular text.

The first time the page is loaded everything works but when a new child div is added (lets say having text xyz) and then use enters xyz in textarea and presses remove button (which is coded to remove child div having text xyz in them) it doesn't work. Sample HTML markup (there may be infinite number of child divs)

  <div class="container>
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
  <div class="child4"></div>
  </div>
  <button class="AppendWithSomeText"></button>
  <button class="RemoveDivWithSomeMatchedText"></button>
  <textarea></textarea>

jquery for adding the div

     var newdiv = = document.createElement('div');
     newdiv.className = 'child';
     $(".container").append(newdiv);
     $(".container").find(".child").html(textfromtextarea);
     // here text from text area is a string stored from user input in             textarea

jQuery for remove button

    $('.container>div:contains("'+textfromtextarea+'")').remove();
    //works only first time