Delete div with JavaScript

Question

In my View, I'm dynamically add divs like this via JS:

<div id="detail[0]">
        <input name="detail.Index" type="hidden" value="0" />
        <input name="detail[0].details_name" type="text" />
        <input name="detail[0].details_value" type="text" />
        <input class="btn" type="button" value="Delete" />
</div>

The question is how to delete the chosen one by clicking the Delete button in div?

JavaScript that adds new divs:

<script>
$(function() {
    var i = 0;
    $('.plus').click(function()
    {
        ++i;
        var html2add = "<div id='detail[" + i + "]'>" +
            "<input name='detail.Index' type='hidden' value='" + i + "' />" +
            "<input name='detail[" + i + "].details_name' type='text' />" +
            "<input name='detail[" + i + "].details_value' type='text' />" +
            "<input class='btn' type='button' value='Delete' />"+
            "</div>";
        $('#details_part').append(html2add);
    })
})

choose `div` with `$(this).closest('div')` and then `remove()`. — Shubham Baranwal, May 12 '17 at 07:33
Possible duplicate of [How to remove the parent element using plain javascript..!](http://stackoverflow.com/questions/2727717/how-to-remove-the-parent-element-using-plain-javascript) — Rahul, May 12 '17 at 07:34

score 2 · Accepted Answer · edited May 12 '17 at 13:19

2

To delete the div containing the delete button, just use the remove() function:

$(document).on('click', '.btn', function(){
  var cur = $(this);
  cur.parent().remove();
});

edited May 12 '17 at 13:19

Nisse Engström

4,738
23
27
42

answered May 12 '17 at 10:00

Faisal Mk

71
5

score 1 · Answer 2 · answered May 12 '17 at 07:51

A node cannot commit suicide (remove itself), therefore you must remove it from its parent node like this:

<script>    
function deleteItem (id) {
      var item = document.getElementById(id);

      item.parentNode.removeChild(item)
    }
</script>
<div>
  <div id="detail[0]">
          <input name="detail.Index" type="hidden" value="0" />
          <input name="detail[0].details_name" type="text" />
          <input name="detail[0].details_value" type="text" />
          <input class="btn" type="button" value="Delete" onclick="deleteItem('detail[0]')" />
  </div>
</div>

Codepen example: https://codepen.io/getreworked/pen/MmVMJB

OluO · Answer 3 · 2017-05-12T07:44:14.410

0

If you are using Jquery you can do

$(".btn").click(function () {
     $(this).closest("div").remove();
})

edited May 12 '17 at 07:44

answered May 12 '17 at 07:38

OluO

94
3

score 0 · Answer 4 · answered May 12 '17 at 07:52

There are many ways to do this.

This one will hide the div using purely JavaScript.

 <div id="detail[0]">
     <input name="detail.Index" type="hidden" value="0" />
     <input name="detail[0].details_name" type="text" />
     <input name="detail[0].details_value" type="text" />
     <input class="btn" type="button" onclick="removeDiv('detail[0]')" value="Delete" />
 </div>

<script>
 function removeDiv(id){
   document.getElementById(id).style.display = 'none';
  }
 </script>

Just pass the parameter of the ID of your parent div.

This is Using jQuery:

 <div id="detail[0]">
     <input name="detail.Index" type="hidden" value="0" />
     <input name="detail[0].details_name" type="text" />
     <input name="detail[0].details_value" type="text" />
     <input class="btn" type="button" value="Delete" />
  </div>

 <script>
 $(function(){
     $('.btn').click(function(){
       $(this).parent().remove();
     });
 });
</script>

Cheers,

score 0 · Answer 5 · answered May 12 '17 at 10:15

// Include below jquery 1.7 script in your file first    
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js">

// then use this code to remove   
<script type="text/javascript">
     $(function(){
         $('.btn').live('click' , function(){
           $(this).parent('div').remove();
         });
     });
</script>

Delete div with JavaScript

5 Answers5