[英]How to remove element dynamically added?
我有這段代碼,它在文本框下方添加了動態div,但是我想在用戶刪除字符后將其刪除:
下面的代碼不起作用,我看不到我在做什么錯
參見下面的代碼:
$(document).ready(function () {
$("#searchcontent").keypress(function (e) {
var dvSearch = $('<div />');
dvSearch.attr('dvSearch', '1');
if ($("#searchcontent").val().length >= 2) {
var pos = $(this).position();
dvSearch.html("<div>ffff:<div><div>eeee:<div><div>ggggg:<div>").css({
top: pos.top + $(this).height() + 18,
left: pos.left,
width: '300px',
position: 'absolute',
'background-color': 'Yellow'
}).insertAfter($(this));
}
else {
$("div[dvSearch='1']").remove();
}
});
});
我建議僅准備一個容器來接收HTML中的結果內容。 然后,您可以通過在其中添加結果或清空該容器來減少問題。 在原始代碼中,您一直在每個keypress
事件上不斷添加div
元素。
另外,正如其他人提到的那樣,您將要使用.keyup()
而不是.keypress()
來確保事件觸發時輸入的值正確。
的HTML
<input type="text" id="searchcontent" name="searchcontent" class="txtSearch" maxlength="30" />
<div id="searchresult"></div>
JS
$(document).ready(function() {
$("#searchcontent").keyup(function(e) {
if ($("#searchcontent").val().length >= 2) {
var pos = $(this).position();
$("#searchresult").html("<div>ffff:<div><div>eeee:<div><div>ggggg:<div>");
}
else {
$("#searchresult").empty();
}
});
});
問題是在實際值更新之前先運行按鍵。 因此,如果文本框顯示“ hi”,然后按Backspace鍵,則select的值仍為“ hi”。
改變
$("#searchcontent").keypress(function(e){
至
$("#searchcontent").keyup(function(e){
它解決了這個問題。
問題在於,按下退格鍵時不會觸發.keypress()。 使用.keyup()代替。
始終運行html選擇器不是一個好方法。 尤其是全球。 將鏈接保存到節點並通過它刪除它
$(document).ready(function () {
$("#searchcontent").keyup(function (e) {
var el = $(this),
// getting link
dvSearch = el.data("searchBlock"),
// getting passed state
dvPassed = el.data("searchPassed"),
pos;
// setting if first run
if (!dvSearch) {
dvSearch = $("<div/>");
// for what is it ?
dvSearch.attr('dvSearch', '1');
el.data("searchBlock", dvSearch);
el.data("searchPassed", false);
}
if (el.val().length >= 2) {
pos = el.position();
// Inserting element if need
if (!dvPassed) {
dvSearch.insertAfter(el);
el.data("searchPassed", true);
}
// setting html
dvSearch.html("<div>ffff:<div><div>eeee:<div><div>ggggg:<div>").css({
top: pos.top + el.height() + 18,
left: pos.left,
width: '300px',
position: 'absolute',
'background-color': 'Yellow'
});
}
else {
dvSearch.remove();
el.data("searchPassed", false);
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.