我如何使用普通 JS 删除最后一个输入元素

Question

HTML代码

<div class="input_d column">
  <form action="/action_page.php" id="drink_list">
    <input type="text" id="drinking" name="alcohol" placeholder="Whiskey + Cola ?">
  </form>
</div>
<div class="add_and_delete text-center">
  <button type="button" name="button_new" onclick="add_drinks()">ADD MORE</button>
  <button type="button" name="button_delete" onclick="delete_drinks()">DELETE</button>
</div>

JS代码

function delete_drinks(){
  var y = document.getElementById('drinking');
  y.parentNode.removeChild(y);
}

这会删除第一个输入元素，但我需要最后一个。我该怎么做？

Answer 1

试试这个。

function delete_drinks() {
    let inputEle = document.querySelectorAll('#drink_list input');
    if (inputEle.length > 0) {
        inputEle[inputEle.length - 1].remove();
    }

}

function add_drinks() {
    let form = document.querySelector('#drink_list');
    let inputEle = document.createElement('input');
    inputEle.setAttribute('placeholder', 'Whiskey + Cola');
    form.appendChild(inputEle);

}

<div class="input_d column">
    <form action="/action_page.php" id="drink_list">
        <input type="text" id="drinking" name="alcohol1" placeholder="Whiskey + Cola ?">
        <input type="text" id="drinking2" name="alcohol2" placeholder="Whiskey + Cola2 ?">
        <input type="text" id="drinking3" name="alcohol3" placeholder="Whiskey + Cola3 ?">
    </form>
</div>
<div class="add_and_delete text-center">
    <button type="button" name="button_new" onclick="add_drinks()">ADD MORE</button>
    <button type="button" name="button_delete" onclick="delete_drinks()">DELETE</button>
</div>

和Class

function delete_drinks() {
    let inputEle = document.getElementsByClassName('input-element');
    if (inputEle.length > 0) {
        inputEle[inputEle.length - 1].remove();
    }

}

function add_drinks() {
    let form = document.querySelector('#drink_list');
    let inputEle = document.createElement('input');
    inputEle.setAttribute('placeholder', 'Whiskey + Cola');
    inputEle.setAttribute('class', 'input-element');
    form.appendChild(inputEle);

}

    <div class="input_d column">
        <form action="/action_page.php" id="drink_list">
            <input type="text" class="input-element" id="drinking" name="alcohol1" placeholder="Whiskey + Cola ?">
            <input type="text" class="input-element" id="drinking2" name="alcohol2" placeholder="Whiskey + Cola2 ?">
            <input type="text" class="input-element" id="drinking3" name="alcohol3" placeholder="Whiskey + Cola3 ?">
        </form>
    </div>
    <div class="add_and_delete text-center">
        <button type="button" name="button_new" onclick="add_drinks()">ADD MORE</button>
        <button type="button" name="button_delete" onclick="delete_drinks()">DELETE</button>
    </div>

我如何使用普通 JS 删除最后一个输入元素

How do i delete the last input element using plain JS

javascript

dom

element

input