$("input[type = 'button']").click(function() {
var a = this.id;
switch (a) {
case 'div':
case 'mul':
case 'sub':
case 'plus':
break;
case 'equal':
break;
case 'clean':
case 'del':
console.log(a);
$('#screen:last-child').remove();
break;
default:
$('#screen').append('<p>' + a + '</p>');
}
});
这是我的jQuery代码。我想在单击some按钮时附加所选元素的id，并在单击id为clean或del的按钮时删除#screen的最后一个子元素。默认情况下使用append并可以正常工作，但是del函数无法正常工作。我尝试了一些方法，但仍然无法正常工作。谢谢回答我的问题。
用 children()
$("#screen").children().last().remove();
动态添加元素时，可能需要使用 .on()
$("body").on('click', "input[type='button']", function() {
var a = this.id;
switch (a) {
case 'div':
case 'mul':
case 'sub':
case 'plus':
break;
case 'equal':
break;
case 'clean':
case 'del':
console.log(a);
$('#screen:last-child').remove();
break;
default:
$('#screen').append('<p>' + a + '</p>');
}
});
$(document).ready(function() {
function plus(a, b) {
return a + b;
}
function multiple(a, b) {
return a / b;
}
function minus(a, b) {
return a - b;
}
function division(a, b) {
return a / b;
}
var ope = [];
$("body").on('click', "input[type='button']", function() {
var a = this.id;
switch (a) {
case 'div':
case 'mul':
case 'sub':
case 'plus':
break;
case 'equal':
break;
case 'clean':
case 'del':
$('#screen').children().last().remove();
break;
default:
$('#screen').append('<p>' + a + '</p>');
}
});
});body{
background-color:#FCFAF2;
}
#calculator{
margin-top:20%;
padding-top:25px;
width:25%;
border:solid 2px black;
border-radius:5%;
background-color:#0D5661;
padding-bottom:20px;
}
#screen{
margin:20px 30px 30px 30px;
height:55px;
background-color:#0F4C3A;
border-radius:5%;
box-shadow:inset 2px 2px 3px 2px rgba(0,0,0,0.24);
padding-top:14px;
padding-right:10px;
color:white;
font-size:20px;
font-weight:bold;
}
#screen p{
display:inline-block;
}
#button{
margin:auto 20px auto 20px;
}
.button{
width:45px;
height:34px;
background-color:black;
border:none;
border-radius:3px 3px 10px 10px;
margin:5px 5px 5px 5px;
padding:5px 5px 5px 5px;
color:white;
display:inline-block;
}
.button:hover {
box-shadow: 0 3px 4px 0 rgba(0,0,0,0.24),0 3px 4px 0 rgba(0,0,0,0.19);
}
.two{
width:100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calculator" class="center-block text-center container">
<div id="screen" class = 'text-right'></div>
<div id="button">
<input type="button" value="Del" class="button two" id='del'>
<input type="button" value="√ " class="button two" id='sqrt'></br>
<input type="button" value="0" class="button" id='0'>
<input type="button" value="9" class="button" id='9'>
<input type="button" value="8" class="button" id='8'>
<input type="button" value="/" class="button" id='div'></br>
<input type="button" value="6" class="button" id='6'>
<input type="button" value="5" class="button" id='5'>
<input type="button" value="4" class="button" id='4'>
<input type="button" value="*" class="button" id='mul'></br>
<input type="button" value="3" class="button" id='3'>
<input type="button" value="2" class="button" id='2'>
<input type="button" value="1" class="button" id='1'>
<input type="button" value="-" class="button" id='sub'></br>
<input type="button" value="0" class="button" id='0'>
<input type="button" value="AC" class="button" id='clean'>
<input type="button" value="+" class="button" id='plus'>
<input type="button" value="=" class="button" id='equal'></br>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句