CODEWITHSUNDEEP
javascriptjqueryhtml
Ignorant23
Ignorant23

Reputation: 101

How to dynamically remove elements in javascript?

Is there a way to dynamically remove elements with javascript or jquery. Suppose I have a function createElements() which creates new element and another function removeElement() which is suppose to remove the corresponding element. You will notice that when you run the snippet that when you click on the remove button all the element is gone! How could I implement this code? Isn't there a jquery selector where i could simply use removeElement(this) or somenething like that? Any suggestions are most welcome :) thank you. 

function createElements() {
  const boom = document.getElementById('boom');
  boom.insertAdjacentHTML(
    'beforeend', '<div class="newElem"><p >new element created dynamically yay!</p><button onclick="removeElement()">remove</button></div>'
  );
}

function removeElement() {
  alert('element removed dynamically boOoOoOoOooo!')
  $('.newElem').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<br>
<button onclick="createElements()">Create new element</button>

Upvotes: 0

Views: 1070

Answers (3)

Arpit Srivastava
Arpit Srivastava

Reputation: 2235

You can do it like this:

function createElements() {
  const boom = document.getElementById('boom');
  boom.insertAdjacentHTML(
    'beforeend', '<div class="newElem"><p >new element created dynamically yay!</p><button onclick="removeElement(this)">remove</button></div>'
  );
}

function removeElement(element) {
  alert('element removed dynamically boOoOoOoOooo!')
  $(element).parent(".newElem").remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<br>
<button onclick="createElements()">Create new element</button>

Upvotes: 1

Victoria Ruiz
Victoria Ruiz

Reputation: 5013

To be able to always delete the div that encompasses the remove button, you have to traverse the DOM tree. There are lots of jQuery goodies for this: http://api.jquery.com/category/traversing/

In this particular case, I would do the following:

var elementCounter = 0;

function createElements() {
  const boom = document.getElementById('boom');
  boom.insertAdjacentHTML(
    'beforeend', '<div class="newElem"><p >'+elementCounter+': new element created dynamically yay!</p><button onclick="removeElement(event)">remove</button></div>'
  );
  elementCounter++;
}

function removeElement(event) {
  alert('element removed dynamically boOoOoOoOooo!')
  $(event.target).closest('.newElem').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<br>
<button onclick="createElements()">Create new element</button>

So you pass on the click event to the function as a parameter, and then with event.target you find out which button was clicked. $(event.target).closest(".newElem") will get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You just need to follow one single API. Use either pure JavaScript or jQuery. I would also suggest you to use unobstructive approach. Also, the way you remove the elements is wrong. You are removing everything.

See this way:

$(function() {
  $("button#add").click(function() {
    $("#boom").after('<div class="newElem"><p >new element created dynamically yay!</p><button class="remove">remove</button></div>');
  });

  $(document).on("click", ".remove", function() {
    alert('element removed dynamically boOoOoOoOooo!')
    $(this).closest(".newElem").remove();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<button id="add">Create new element</button>

Upvotes: 1

Related Questions