我是JS的新手。在这种情况下,我想在单击+按钮后在新行中添加输入书和价格。所以当我单击-按钮时,输入将被删除。对不起,我的英语不好。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Book</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Price</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4" style="align-items: center; display: flex">
<button style="margin-right: 10px;"><i class="fas fa-plus"></i></button>
<button><i class="fas fa-minus"></i></button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
答案 0 :(得分:-1)
<div class="container" id="main-element">
<div class="row row-to-clone"">
<div class="col-md-4">
<div class="form-group">
<label>Book</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Price</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4" style="align-items: center; display: flex">
<button style="margin-right: 10px;"><i class="fas fa-plus"></i></button>
<button><i class="fas fa-minus"></i></button>
</div>
</div>
</div>
<buttons id="addRow">Add</button>
jQuery代码
<script>
$(document).ready(function(){
$('#addRow').click(function(){
// clone the row
const clonedRow = $('.row-to-clone').html()
// append to the container
$('#main-element').append(`<div class="row">${ clonedRow }</div>`);
})
})
</script>