Question

我是javascript新手，目前需要单独的删除功能。我决定使用variable.removeChild()，但它删除了2个输入

document.addEventListener('DOMContentLoaded', () => {

  document.getElementById("delete").addEventListener("click", function deletes(){
        
    var parent = document.getElementById("list");
        
    var child = parent.getElementsByTagName("li")[0];
        
    console.log(child);
        
    parent.removeChild(child); //deletes a pair of my li inputs
        
    
  });

});

这是我的HTML代码的样子

<body>
        <h1>LIST</h1>
        <h2>Items: </h2>
        <div>
            <ol id="list">
                <li>test</li>
            </ol>
        </div>
        <form id="insert">
            <input type="text" id="itemInput" placeholder="Item" name="item">
            <input type="submit" id="add" value="Add">
                
        </form>
        <input type="submit" id="search" value="Search"> //search doesn't do anything yet
        <input type="submit" id="delete" value="Delete first item">  //Here is where it begins

    </body>

这是我的另一个功能。我也使用addEventListener（）可能是问题吗？这段代码使我可以根据用户的意愿动态添加列表项

document.addEventListener('DOMContentLoaded', () => {
//calls function once #insert has submit a form/hit the input 
document.querySelector('#insert').onsubmit = () => {

    //create variable
    if(document.querySelectorAll('li').length >= 10){
        return false;
    };

    //get the value of the input
    let name = document.querySelector('#itemInput').value;
    //stores value in the h3 tag


    //create element of 'li'
    const li = document.createElement('li');
    //add the contents to the value of 'name'
    li.innerHTML = name;

    //now append the element to the #list section
    document.querySelector('#list').append(li);

    //gets the length of all the list items (li) and stored it in counter
    counter = document.querySelectorAll('li').length;
    //change the h2 tag with the updated list items
    document.querySelector('h2').innerHTML = `Items: ${counter}`;

    //prevents the form from submitting (good for debugging!!!)
    return false;
};

}）;

Answer 1

通过添加document.querySelector('#list')获得.querySelectorAll('li')[0]和第一个li的列表，然后在内部查找输入。

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('#delete').addEventListener("click", function deletes(){
        let li = document.querySelector('#list').querySelectorAll('li')[0];
        let inputs = li.querySelectorAll('input');
        // Is there any input in li?
        if(inputs.length > 0) {
            // Delete only the first one
            inputs[0].remove();
            // If you want to keep other inputs, just disable the button
            this.disabled = true;
        }
    });
});

<ul id="list">
  <li>
     <input type="text" value="input1">
     <input type="text" value="input2">
  </li>
</ul>
<button id="delete">Delete</button>

使用

querySelector（）和querySelectorAll（）可以按ID，类名，标记名，属性等查找项目。就像jQuery一样。参考：https://developer.mozilla.org/en/docs/Web/API/Document/querySelector

removeChild（）;删除两个输入？我只需要删除1个输入

1 个答案: