Как удалить последний элемент ввода, используя обычный JS - PullRequest
Новая
       6

Как удалить последний элемент ввода, используя обычный JS

0 голосов
/ 16 января 2020

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

Это удаляет первый элемент ввода, но мне нужен последний. Как я могу это сделать?

1 Ответ

1 голос
/ 16 января 2020

Попробуйте это. 

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>

С классом 

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>
...