[英]How to access appended element and remove it?
我為此做了大量研究,但無法解決。
有一個父div .container。 其中有許多子div,其中包含不同的文本。 .container外面有兩個按鈕。 一個用於動態創建和附加具有特定文本的子元素。 其他是刪除具有特定文本的子div。
第一次加載頁面時,一切正常,但是當添加了一個新的子div(比如說有文本xyz),然后使用textarea中的enter xyz並按下remove按鈕(編碼為刪除其中有文本xyz的子div)時,不起作用。 示例HTML標記(子div數量可能無限)
<div class="container>
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
<button class="AppendWithSomeText"></button>
<button class="RemoveDivWithSomeMatchedText"></button>
<textarea></textarea>
jQuery的添加股利
var newdiv = = document.createElement('div');
newdiv.className = 'child';
$(".container").append(newdiv);
$(".container").find(".child").html(textfromtextarea);
// here text from text area is a string stored from user input in textarea
jQuery的刪除按鈕
$('.container>div:contains("'+textfromtextarea+'")').remove();
//works only first time
http://codepen.io/dustinpoissant/pen/VYXGwB
的HTML
<input type='text' id='input' />
<button onclick='addItem()'>Add</button>
<button onclick='removeItem()'>Remove</button>
<br><br>
<div id='box'></div>
的JavaScript
function addItem(){
$("#box").append("<span>"+$("#input").val();+"</span>");
}
function removeItem(){
var text = $("#input").val();
$("#box span").each(function(i, el){
if($(el).text()==text) $(el).remove();
});
}
為了保持結構的統一性,我添加了子編號類型的類。
我希望這是您所期望的。
$(document).ready(function() { $(".AppendWithSomeText").on("click", function() { $(".container").append("<div class=child" + ($("[class^='child']").length + 1) + ">" + $(".content").val() + "</div>") }) $(".RemoveDivWithSomeMatchedText").on("click", function() { $('.container>div:contains("' + $(".content").val() + '")').remove(); }) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <div class="child1">somecontent</div> <div class="child2">somecontent</div> <div class="child3">somecontent</div> <div class="child4">somecontent</div> </div> <button class="AppendWithSomeText">add</button> <button class="RemoveDivWithSomeMatchedText">remove</button> <textarea class="content"></textarea>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.