CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Anupam Ram
Anupam Ram

Reputation: 119

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

Upvotes: 0

Views: 725

Answers (2)

roshan
roshan

Reputation: 2510

Inorder to keep the uniformity of structure I have added class of type child-number.

I hope this is what you expected.

$(document).ready(function() {
  $(".AppendWithSomeText").on("click", function() {

    $(".container").append("<div class=child" + ($("[class^='child']").length + 1) + ">" + $(".content").val() + "</div>")
  })
  $(".RemoveDivWithSomeMatchedText").on("click", function() {

    $('.container>div:contains("' + $(".content").val() + '")').remove();
  })

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="child1">somecontent</div>
  <div class="child2">somecontent</div>
  <div class="child3">somecontent</div>
  <div class="child4">somecontent</div>
</div>
<button class="AppendWithSomeText">add</button>
<button class="RemoveDivWithSomeMatchedText">remove</button>
<textarea class="content"></textarea>

Upvotes: 0

Dustin Poissant
Dustin Poissant

Reputation: 3418

http://codepen.io/dustinpoissant/pen/VYXGwB

HTML

<input type='text' id='input' />
<button onclick='addItem()'>Add</button>
<button onclick='removeItem()'>Remove</button>
<br><br>
<div id='box'></div>

JavaScript

function addItem(){
  $("#box").append("<span>"+$("#input").val();+"</span>");
}
function removeItem(){
  var text = $("#input").val();
  $("#box span").each(function(i, el){
    if($(el).text()==text) $(el).remove();
  });
}

Upvotes: 2

Related Questions