首页猿问尝试使用 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 关注
172 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

尝试使用 JavaScript 添加删除功能，当我单击它时需要删除整个表单。

尝试使用 JavaScript 添加删除功能，当我单击它时需要删除整个表单。

6 回答

添加回答