刪除使用JavaScript

格在我看來，我通過動態JS添加的div像這樣：刪除使用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" value="Delete" /> 
</div>

的問題是如何通過單擊DIV刪除按鈕刪除選定的一個？

的JavaScript，增加了新的div：

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

來源

2017-05-12 C. America

'this.parentNode一個.remove（）'？ – Albzi

要刪除id detail [0]嗎？ –

用'$（this）.closest（'div'）'選擇'div'，然後'remove（）'。 –

刪除包含刪除按鈕的div，只需使用remove()功能：

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

來源

2017-05-12 10:00:37

如果您正在使用jQuery你可以做

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

來源

2017-05-12 07:38:04 OluO

節點不可能自殺（刪除自身），因此，你必須刪除它從它的父節點是這樣的：

<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示例：https://codepen.io/getreworked/pen/MmVMJB

來源

2017-05-12 07:51:04

有很多方法可以做到這一點。

這一個將隱藏該div使用純粹的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>

只要通過父div的ID參數。

這是使用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>

乾杯，

來源

2017-05-12 07:52:48 smzapp

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

來源

2017-05-12 10:15:55

刪除使用JavaScript

回答

相關問題