CODEWITHSUNDEEP
javascriptjqueryhtml
Ari
Ari

Reputation: 6199

Remove DIV using button

Let's say I have a div with a button inside:

<div>
  <button id='delete_btn'>delete</button>
</div>

What would be the jQuery code to delete that div and ONLY that div As I have another button that dynamically adds copies of that sample code above.

So I could have something like this, but I only want the div that contains the button pressed, to be deleted.

<div>
  <button id='delete_btn'>delete</button>
</div>

<div>
  <button id='delete_btn'>delete</button> 
</div>

thanks!

Upvotes: 0

Views: 389

Answers (2)

vol7ron
vol7ron

Reputation: 42149

This can easily be performed with Vanilla JS and the newer remove() method. If IE-support is not a necessity, consider the following; or, if IE-support is needed, it wouldn't take much to amend the following:

document.addEventListener('click', function (e) {
  if (e.target.matches('.delete_btn'))
    e.target.parentNode.remove()
}, false);
<div>
  <button class='delete_btn'>delete 1</button>
</div>

<div>
  <button class='delete_btn'>delete 2</button>
</div>

event / state

This binds an event to the document (ancestor of the button). The benefit from this is that the click handler will be called for any new delete buttons that are dynamically created after the page has loaded (and will still function).

class vs id

This also uses class in place of id. This is because id should be reserved for unique values and class is intended to be a handle to like-elements. JavaScript can produce unexpected behavior if multiple elements are named with the same ID.

remove()

Using remove() an element can be removed from the DOM as expected. An older method would be to call the removeChild() on the parent (e.g., parent=e.target.parentNode; parent.parentNode.removeChild(parent))

more ES6

Of course, you could simplify the code using a named-argument/destructuring-assignment, which essentially assigns event.target to a variables named btn and The code can further be reduced, using a common arrow function. See below.

document.addEventListener('click', ({target: btn})=>{
  btn.matches('.delete_btn') && btn.parentNode.remove()
}, false);
<div><button class='delete_btn'>delete 1</button></div>
<div><button class='delete_btn'>delete 2</button></div>

{target: btn} plucks the event argument being passed into the function and takes the value of the target property and assigns it to a new variable called btn. If you just had {target} (without the assignment), in the function body you would replace btn with target (e.g., target.matches(…), target.parentNode)

Upvotes: 1

Mamun
Mamun

Reputation: 68933

id should not be duplicate in a document. Use class instead. Inside the click handler function, you can target the parent of this element to remove:

$(document).on('click', '.delete_btn', function(){
  $(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button class='delete_btn'>delete</button>
</div>

<div>
  <button class='delete_btn'>delete</button> 
</div>

Upvotes: 4

Related Questions