如何單擊按鈕並在不知道ID或類值的情況下刪除兩件事？

Question

我正在談論的兩件事是一個文本字段和一個字符串，它表示您需要鍵入以獲取該文本字段的HTML。有一個按鈕可以讓這兩件事情出現。每次點擊該按鈕時，都會出現另一對相同的類型。

但是，每次生成一個新對時，我還會在文本字段旁邊生成一個按鈕，該按鈕在被點擊時應該刪除文本字段以及使用它創建的字符串。那麼，我該如何做到這一點？

我可以在「當按鈕類x1被點擊時，刪除文本字段和也有類x1的字符串」，然後「當按鈕類x2被點擊時，刪除文本字段和也有類x2的字符串」等等，但我的意思是除此之外的解決方案。

這裏是文本字段/ HTML對創作的樣子：

$(document).ready(function() { 
$('#textField').click(function() { 
$('#codeBox').append('<div id="divText'+visText+'"><input type="text" class="textfield" maxlength="0" id="visText'+visText+'"><input type="button" value="O" id="o"> <input type="button" value="?" id="que"> <input type="button" value="X" id="closeX"><div id="textCode" class="codeDisplay"><div class="textCode">&lt;div&gt;&lt;input&nbsp;type="text"&nbsp;class="textfield"&nbsp;id="text'+textClicked+'"&lt;/div&gt;&lt;br&gt;</div></div>'); 

$('#codeBox2').append('&lt;div&gt;&lt;input&nbsp;type="text"&nbsp;class="textfield"&nbsp;id="text'+textClicked+'"&lt;/div&gt;&lt;br&gt;') 

Answer 1

如果動態創建的元素，那麼你就必須從創建它們的代碼對它們的引用。當創建一個按鈕，添加一個click監聽器，它使用通過關閉這些引用：

var text = document.createTextNode("some text"); 
var input = document.createElement("input"); 
var button = document.createElement("button"); 
button.addEventListener("click", function() { 
    text.parentElement.removeChild(text); 
    input.parentElement.removeChild(input); 
    button.parentElement.removeChild(button); 
}); 

Answer 2

您可以使用parent()做

假設你添加了一些這樣就點擊「添加」按鈕

<div> 
     <div></div> 
     <button class="remove">remove</button> 
</div> 

JS刪除

$(document).on("click", ".remove", function(){ 
    $(this).parent().remove(); 
}); 

當您單擊刪除時，它會找到它的父項並將其刪除。

JS Demo

Answer 3

瀏覽jQuery的各種樹的遍歷方法：http://api.jquery.com/category/traversing/tree-traversal，可以幫助您刪除正確的元素時，你點擊刪除按鈕中的一個。