jquery - Delete div with JavaScript - Stack Overflow

admin管理员组

文章数量:1312769

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);
    })
})

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);
    })
})

• javascript
• jquery
• html

Share Improve this question Follow edited May 12, 2017 at 8:09 C. America asked May 12, 2017 at 7:31 C. AmericaC. America 8711 gold badge22 silver badges1010 bronze badges 4

• this.parentNode.remove()? – Albzi Commented May 12, 2017 at 7:32
• do you want to delete with id detail[0]? – sumit chauhan Commented May 12, 2017 at 7:32
• choose div with $(this).closest('div') and then remove(). – Shubham Baranwal Commented May 12, 2017 at 7:33
• 4 Possible duplicate of How to remove the parent element using plain javascript..! – Rahul Commented May 12, 2017 at 7:34

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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();
});

A node cannot mit 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

If you are using Jquery you can do

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

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,

// Include below jquery 1.7 script in your file first    
<script type="text/javascript" src="http://code.jquery./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>

本文标签： jqueryDelete div with JavaScriptStack Overflow