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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

嘗試使用 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>

        <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>


查看完整回答
反對 回復 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 中有兩種方法,

  1. 如果要刪除表單及其子元素

$("#form").remove();
  1. 如果只想刪除表單的子元素。

$("#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>

        <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>


查看完整回答
反對 回復 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>

        <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>


查看完整回答
反對 回復 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();

}

<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>


查看完整回答
反對 回復 2023-06-15
  • 6 回答
  • 0 關注
  • 212 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號