6 回答

TA貢獻1827條經驗 獲得超9個贊
您可以在要刪除的元素上使用remove() 。
const?deleteFunction?=?()?=>?{? ???document.querySelector('form').remove(); }

TA貢獻1906條經驗 獲得超10個贊
您可以使用parentNode,您只需要了解它的含義即可。
鏈接的父節點是form-group。那個的parentNode是form-row,那個的parentNode是表單。
您還需要傳遞this給該函數,以便它知道您單擊的是哪個元素。
function deleteFunction(el){
el.parentNode.parentNode.parentNode.remove();
}
form{background:red;}
<form>
<div class="form-row">
<div class="col-4">
<input
type="text"
class="form-control"
placeholder="Ingredient"
/>
</div>
<div class="col-4">
<input
type="text"
class="form-control"
placeholder="Quantity"
/>
</div>
<div class="form-group col-3">
<select id="inputUnit" class="form-control">
<option selected>g</option>
<option>kg</option>
<option>lb</option>
<option>oz</option>
</select>
</div>
<div class="form-group col-1">
<a id="remover" href="#" onclick="deleteFunction(this);">
<i class="fa fa-times fa-2x" aria-hidden="true">X</i>
</div>
</div>
</form>

TA貢獻1824條經驗 獲得超6個贊
給你的表單一個“id”,然后使用 JQuery 刪除它(考慮到你在提到引導程序后正在使用它)。
<form id="form"><div class="form-row"> <div class="col-4"> <input type="text" class="form-control" placeholder="Ingredient" /> </div> <div class="col-4"> <input type="text" class="form-control" placeholder="Quantity" /> </div> <div class="form-group col-3"> <select id="inputUnit" class="form-control"> <option selected>g</option> <option>kg</option> <option>lb</option> <option>oz</option> </select> </div> <div class="form-group col-1"> <a id="remover" href="#" onclick="deleteFunction();return false;"> <i class="fa fa-times fa-2x" aria-hidden="true"></i> </div> </div> </form
在 Jquery 中有兩種方法,
如果要刪除表單及其子元素
$("#form").remove();
如果只想刪除表單的子元素。
$("#form").empty();

TA貢獻1895條經驗 獲得超7個贊
而這個決定來自于我。這里使用的方法closest()——引用父元素。和remove()方法。
但是如果你只需要隱藏表單,那么使用這個:
...
this.closest('form').style.display = 'none';
...
let remove = document.querySelector('#remover');
remove.onclick = function() {
this.closest('form').remove();
}
<form>
<div class="form-row">
<div class="col-4">
<input
type="text"
class="form-control"
placeholder="Ingredient"
/>
</div>
<div class="col-4">
<input
type="text"
class="form-control"
placeholder="Quantity"
/>
</div>
<div class="form-group col-3">
<select id="inputUnit" class="form-control">
<option selected>g</option>
<option>kg</option>
<option>lb</option>
<option>oz</option>
</select>
</div>
<div class="form-group col-1">
<a id="remover" href="#">remove
<i class="fa fa-times fa-2x" aria-hidden="true"></i>
</a>
</div>
</div>
</form>

TA貢獻1744條經驗 獲得超4個贊
這是一種方法,運行下面的代碼片段:
//we are targeting the form with querySelector
var form = document.querySelector("form");
//function to remove form from DOM
function remove() {
form.remove();
}
<div>
<form>
<div class="form-row">
<div class="col-4">
<input
type="text"
class="form-control"
placeholder="Ingredient"
/>
</div>
<div class="col-4">
<input
type="text"
class="form-control"
placeholder="Quantity"
/>
</div>
<div class="form-group col-3">
<select id="inputUnit" class="form-control">
<option selected>g</option>
<option>kg</option>
<option>lb</option>
<option>oz</option>
</select>
</div>
<div class="form-group col-1">
<a id="remover" href="#">
<i class="fa fa-times fa-2x" aria-hidden="true"></i>
</div>
</div>
</form>
</div>
<div>
<button onclick="remove()">delete</button>
</div>

TA貢獻1828條經驗 獲得超3個贊
您可以用戶remove()從 DOM 中刪除元素。為您的表單分配一個 ID 并使用選擇元素const myForm = document.getElementById('form')。然后myForm.remove();從 DOM 中刪除它。
function deleteFunction() {
const myForm = document.getElementById('form');
myForm.remove();
}
<form id="form">
<div class="form-row">
<div class="col-4">
<input
type="text"
class="form-control"
placeholder="Ingredient"
/>
</div>
<div class="col-4">
<input
type="text"
class="form-control"
placeholder="Quantity"
/>
</div>
<div class="form-group col-3">
<select id="inputUnit" class="form-control">
<option selected>g</option>
<option>kg</option>
<option>lb</option>
<option>oz</option>
</select>
</div>
<div class="form-group col-1">
<a id="remover" href="#" onclick="deleteFunction();return false;">Delete
<i class="fa fa-times fa-2x" aria-hidden="true"></i>
</div>
</div>
</form>
添加回答
舉報