javascript - 获取与按钮相同的列表项中的文本

Question

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

HTML 看起来像这样:

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

到目前为止我在 Javascript 中得到了什么:

1. 这只会获取按钮的“X”，因为那是“this.innerHTML”，所以它显然不起作用:

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

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

有什么想法吗？

Answer 1

您可以处理 click 事件并读取 previousSibling 的 wholeText:

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