首頁猿問嘗試使用 JavaScript...

嘗試使用 JavaScript 添加刪除功能，當我單擊它時需要刪除整個表單。

JavaScript

白衣非少年 2023-06-15 17:24:48

當我調用該函數時，我需要它基本上刪除所有內容。該功能應該是什么？嘗試使用 parentNode 但無法弄清楚其中的邏輯。<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>

查看完整描述

6 回答

素胚勾勒不出你

TA貢獻1827條經驗獲得超9個贊

您可以在要刪除的元素上使用remove() 。

const?deleteFunction?=?()?=>?{?
???document.querySelector('form').remove();
}

反對回復 2023-06-15

隔江千里

TA貢獻1906條經驗獲得超10個贊

您可以使用parentNode，您只需要了解它的含義即可。

鏈接的父節點是form-group。那個的parentNode是form-row，那個的parentNode是表單。

您還需要傳遞this給該函數，以便它知道您單擊的是哪個元素。

function deleteFunction(el){

el.parentNode.parentNode.parentNode.remove();

}

form{background:red;}

<form>

<input

type="text"

class="form-control"

placeholder="Ingredient"

</div>

<input

type="text"

class="form-control"

placeholder="Quantity"

</div>

</select>

</div>

</div>

</form>

反對回復 2023-06-15

慕妹3242003

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();

反對回復 2023-06-15

人到中年有點甜

TA貢獻1895條經驗獲得超7個贊

而這個決定來自于我。這里使用的方法closest()——引用父元素。和remove()方法。

但是如果你只需要隱藏表單，那么使用這個：

...

this.closest('form').style.display = 'none';

...

let remove = document.querySelector('#remover');

remove.onclick = function() {

this.closest('form').remove();

}

<form>

<input

type="text"

class="form-control"

placeholder="Ingredient"

</div>

<input

type="text"

class="form-control"

placeholder="Quantity"

</div>

</select>

</div>

<a id="remover" href="#">remove

</a>

</div>

</form>

反對回復 2023-06-15

慕無忌1623718

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>

<input

type="text"

class="form-control"

placeholder="Ingredient"

</div>

<input

type="text"

class="form-control"

placeholder="Quantity"

</div>

</select>

</div>

</div>

</form>

</div>

<div>

<button onclick="remove()">delete</button>

</div>

反對回復 2023-06-15

倚天杖

TA貢獻1828條經驗獲得超3個贊

您可以用戶remove()從 DOM 中刪除元素。為您的表單分配一個 ID 并使用選擇元素const myForm = document.getElementById('form')。然后myForm.remove();從 DOM 中刪除它。

function deleteFunction() {

const myForm = document.getElementById('form');

myForm.remove();

}

<input

type="text"

class="form-control"

placeholder="Ingredient"

</div>

<input

type="text"

class="form-control"

placeholder="Quantity"

</div>

</select>

</div>

<a id="remover" href="#" onclick="deleteFunction();return false;">Delete

</div>

</form>

反對回復 2023-06-15

6 回答
0 關注
212 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

嘗試使用 JavaScript 添加刪除功能，當我單擊它時需要刪除整個表單。

嘗試使用 JavaScript 添加刪除功能，當我單擊它時需要刪除整個表單。

6 回答

添加回答

嘗試使用 JavaScript 添加刪除功能，當我單擊它時需要刪除整個表單。

嘗試使用 JavaScript 添加刪除功能，當我單擊它時需要刪除整個表單。