我想删除一个文本框。如果我使用remove()，它只是隐藏。如果我检查，它显示“display:none”作为属性。
基本上，我的程序是从创建这些文本框的数字框中获取数字。我正在显示所有文本框的值。 在所有文本框中输入数据后，如果我删除其中一个并打印，我不希望打印已删除文本框的数据。但我的代码正在打印它。有什么办法可以完全删除文本框吗？ remove() 在这里没有按我的预期工作。
这是我的代码
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var i=1;
var id=1,text;
// text = '<li><input id="input_'+id+'" type="text"/> <button class="btn2">-</button> </li>';
$("#ok").click(function(){
var number = document.getElementById("num").value;
//alert(number);
for(var $j=i; $j<= number; $j++){
text = '<li><input id="input_'+id+'" type="text"/> <button class="btn2">-</button> </li>';
$("ol").append(text);
id++;i++;
}
});
$("#btn1").click(function(){
text = '<li ><input id="input_'+id+'" type="text"/> <button class="btn2">-</button> </li>';
$("ol").append(text);
id++;i++;
});
$('.divi').on('click','.btn2',function(){
$(this).parents("li").slideUp('medium',function(){
$(this).parents("li").remove();
i--;
});
});
$("#btnprint").click(function(){
var number = document.getElementById("num").value;
var msg="";
for(var j=1; j<=number; j++){
msg+=document.getElementById("input_" +j).value + "<br/>";
}
document.getElementById("printdiv").innerHTML=msg;
});
});
</script>
</head>
<body>
<input type="number" id="num" autofocus="true"></input>
<button id="ok">OK</button>
<br/><br/>
<button id="btn1">+</button>
<div class="divi">
<ol>
</ol>
</div>
<button id="btnprint" >Print Data</button>
<div id="printdiv"></div>
</body>
</html>
最佳答案
问题出在这一行:
$(this).parents("li").remove();
选择器错误。 $(this) 已引用 "li" 并且您正在选择 li 的 li 父级这是错误的，因此 remove() 不起作用。顺便说一句，display:none 是由于 slideUp() 函数造成的。
制作该行:
$(this).remove();
关于jquery - 使用 jQuery 删除元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36467128/