刪除輸入元素的父元素提供

HTML表單：刪除輸入元素的父元素提供

<span id="contactSpan" class="repeatEntry"> 
<ul> 
    <div id="contactSpan-1" class="subSpan-1"> 
     <li> 
      <input type="text" id="contactname-1" name="contactname-1" class="contactname"    title="Enter your Full Name" value="<?php echo $_POST['contactname']?>"/> 
     </li> 
     <li> 
      <input id="contactemail-1" type="email" name="contactemail-1" class="contactemail" title="Enter your email address" value="<?php echo $_POST['contactemail']?>"/> 
     </li> 
     <li> 
     <input id="contactmobile-1" type="tel" name="contactmobile-1" class="contactmobile" value="<?php echo $_POST['contactmobile']?>"/> 
     </li> 
     <li> 
      <input type="button" class="remove-this-button" style="display:None" id="remove-this-button-1" name="remove-this-button-1" value="Remove contact"> 
     </li> 
    </div> 
</ul> 
</span> 
<input type="button" class="addMore" id="addContact" name="addContact" value="Add another contact">

我試圖克隆完整< DIV>類。我可以克隆它。最初，「刪除聯繫人」按鈕不會被顯示，但是在克隆元素中它將被顯示。

「刪除聯繫人」對我不起作用，點擊此按鈕，我正在嘗試刪除已克隆的整個父級< div> class。

代碼示例：

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 
var idIncrement = 1; 
$(function() { 

//remove div class function -- not Woking 

    function removeDiv(){ 
    alert("check123"); 
    $(this).parent('div').remove(); 
    } 


// cloning the entire contact "div" -- Working 

    $('input.addMore').on('click', function() { 
     idIncrement++; 
     var $table = $('#contactSpan'); 
     var $tr = $table.find('div').eq(0).clone(); 
     $tr.appendTo($table).find('input').val(''); 

     $tr.appendTo($table).find(".remove-this-button").removeAttr("style"); 
     $tr.appendTo($table).find(".remove-this-button").attr("value", "Remove Contact").on("click", removeDiv); 
     $tr.appendTo($table).find(".remove-this-button").attr("name","remove-this-button-"+idIncrement);   
     $tr.appendTo($table).find(".remove-this-button").attr("id","remove-this-button-"+idIncrement); 
    }); 

}); 

</script>

它能夠從刪除按鈕刪除樣式屬性，並點擊它也調用函數removeDiv。警報在removeDiv函數上觸發。但是隻有刪除（）部分不起作用。

來源

2013-12-21 dreamer

父（）只檢查對於一個級別的祖先，你需要使用最接近的（），如mplungjan的答案。 –

請注意，您的HTML標記無效，DIV不能是UL元素 –

我不確定你的重複appendTo並找到。嘗試只追加一次您的$ tr也是一個div，而不是一行，容器是一個跨度不是一個div。生成的html無效。在任何情況下，您都希望沿着樹向上遊

$tr.appendTo($table).find(".remove-this-button") 
    .on("click", function() { 
    $(this).closest('div').remove(); 
    }) 
    .attr("value", "Remove Contact")

來源

2013-12-21 15:15:43 mplungjan

最接近的直接子元素。 thaks很多:) – dreamer

@dreamer現在你必須修復你的HTML，因爲它是無效的，遲早你可能會有嚴重的問題 –

parents是您的解決方案。

獲取當前匹配元素集合中每個元素的祖先，可以通過選擇器進行過濾。

parent僅返回直接父母。

.parents（）和.parent（）方法是相似的，只不過後者只在DOM樹上傳遞一個單獨的級別。

Here is working demo

試試這個：

$(this).parents('div').remove();

爲點出家長將返回所有父div中爲獲得第一個div嘗試：

$(this).parents('div')[0].remove();

來源

2013-12-21 15:17:14

不，父母（'div'）將返回所有的祖先DIVs。如果有多個父DIV會怎麼樣？ '.parents（'div'）。first（）'可以是一個解決方案，但最好使用'.closest（'div'）' –

可以用類或任何其他標識符進行過濾，這裏的要點是使理解差異父母和父母 –

刪除輸入元素的父元素提供

回答

相關問題