Получить текст в том же элементе списка, что и кнопка

Question

возможно ли получить текст элемента списка нажатием кнопки, которая находится внутри списка? Я не могу идентифицировать его по идентификатору, потому что он будет меняться в зависимости от того, что пользователь вводит.

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 и прочитать 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);
}