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
– Shubham Baranwal, Commented May 12, 2017 at 7:33
Possible duplicate of How to remove the parent element using plain javascript..! — Rahul
– Rahul, Commented May 12, 2017 at 7:34

Nisse Engström · Accepted Answer · 2017-05-12 13:19:27Z

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, 2017 at 13:19

Nisse Engström

4,76323 gold badges29 silver badges44 bronze badges

answered May 12, 2017 at 10:00

Faisal Mk

715 bronze badges

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

Comments

James · Accepted Answer · 2017-05-12 07:51:04Z

1

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

answered May 12, 2017 at 7:51

James

1,0858 silver badges17 bronze badges

Comments

OluO · Accepted Answer · 2017-05-12 07:44:14Z

0

If you are using Jquery you can do

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

edited May 12, 2017 at 7:44

answered May 12, 2017 at 7:38

OluO

943 bronze badges

Comments

smzapp · Accepted Answer · 2017-05-12 07:52:48Z

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,

ujjwal sharma · Accepted Answer · 2017-05-12 10:15:55Z

0

// 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>

answered May 12, 2017 at 10:15

ujjwal sharma

12 bronze badges

Collectives™ on Stack Overflow

Delete div with JavaScript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related