Question

我正在尝试将数据从html发送到javascript，并且使用document.getElementById不会在此处删除它。

{% for p in pl %}
    <li>{{ p.itemName }}: {{ p.itemPrice }} $<button onclick 
    ="deletePurchase()">Remove</button>
    <input type="hidden" placeholder="_" id="pItemName" value="{{ 
    p.itemName }}">
    </li>
{%  endfor %}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

function deletePurchase(){
    var v = document.getElementById("pItemName").value;
    console.log(v);
}

基本上，我正在打印数据库中的项目列表。我希望有每个旁边的删除按钮，当点击时，在我的javascript中调用“deletePurchase（）”。目前，为了简单起见，我想打印按下的“删除”按钮旁边的项目名称。

目前，无论按下哪个“删除”按钮，打印的项目始终是列表的第一个项目名称。

Answer 1

HTML中不能包含重复的TF_Run()属性值。相反，删除那些id属性，而是查找单击id元素后面的元素。

为此你需要将按钮作为参数传递给函数。您可以将button用于此目的。

要使节点跟随另一个节点，您可以使用方法this。请注意，空白也被视为（文本）节点，因此您可能需要多次调用该函数。

JavaScript看起来像这样。我只使用纯HTML来说明：

nextSibling

function deletePurchase(button){
    var elem = button;
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType !== 1);
    
    var v = elem.value;
    console.log(v);
}

替代

由于按钮位于不同的<ul> <li>Cola: 0.80 $<button onclick="deletePurchase(this)">Remove</button> <input type="hidden" placeholder="_" value="Cola"> </li> <li>Coffee: 1.00 $<button onclick="deletePurchase(this)">Remove</button> <input type="hidden" placeholder="_" value="Coffee"> </li> </ul>元素中，您还可以通过按钮的父级找到li元素：

input

function deletePurchase(button){
    var elem = button.parentNode.querySelector('input[type=hidden]');
    var v = elem.value;
    console.log(v);
}

链接

1 个答案:

替代