与按钮在同一列表项中获取文本

Posted 2023-01-11

是否可以通过按下列表内的按钮来获取列表项的文本？我无法通过ID进行识别，因为它会根据用户输入的内容而变化。

HTML看起来像这样：

    <ul>
<li>remove this<button>X</button></li>
<li>or this<button>X</button></li>
</ul>

我到目前为止用Java语言编写的内容：

1. 这只会得到按钮的“ X”，因为那是“ this.innerhtml”，所以显然不起作用：

   function getListElement()
       let getThis = this.innerHTML;
       alert(getThis);
   
   

注意，如果在列表项上使用innerHTML，则将返回："remove this<button>X</button>"。我需要在按钮标签之前获取文本。

有什么想法吗？

答案

您可以处理onclick事件并读取wholeText的previousSibling：

HTML：

<ul>
    <li>remove this
        <button id="btn_1">X</button>
    </li>
    <li>or this
        <button id="btn_2">X</button>
    </li>
</ul>

javascript：

function applyBindings() 
    document.getElementById("btn_1").addEventListener("click", respond);
    document.getElementById("btn_2").addEventListener("click", respond);


applyBindings();


function respond(event) 
    alert(event.target.previousSibling.wholeText);