0

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>

Improve this question
3
  • 1
    Your snippet creates and element and then removes it. What else would you like to do with it? Commented Jun 24, 2018 at 17:50
  • @Victoria Ruiz if you continue to add new elements and then try to remove a specific element you will see the prob Commented Jun 24, 2018 at 17:52
  • Your remove code gets rid of all elements with class=newElem. Is that not what you wanted? Commented Jun 24, 2018 at 17:54

3 Answers 3

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

yesssssssssssssssss! I was looking for something like that !! Thanks man :D
1

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>

Improve this answer

3 Comments

@Ignorant23 You are welcome... And I suggest this method is better than the accepted one because: 1. It uses fully jQuery and not pure JavaScript. 2. It uses unobstructive JavaScript, which means there's no JavaScript content in the HTML.
erm sorry man i wanted to accept both answers but i can only accept one answer :/ I accepted the other answer because the function createElements() is one key component in my project and It cannot be removed. If this was not the case I would definitely have chosen your solution for the reason you mentioned above. Thank you again for the help.
@Ignorant23 Ah... Okay. So you need createElement() function, is it. Fine then. All the best... :)
0

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.

Improve this answer

2 Comments

Note that I added an element counter, which is only there so that you can tell if you're deleting the right element.
Thanks ma'am. This is kind of what I was trying to implement

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.