我如何在列表中添加删除按钮？(How can I add delete button on list?)

编程入门行业动态更新时间:2024-10-24 21:22:49

您好我有开始为html javasicript项目，但我尝试了一些。我想添加列表删除按钮，但我不知道如何添加每行的删除按钮？

<!DOCTYPE html>
<html lang="en">

<body>
  <header><h1></h1></header>
  <section>
   
    <form action="#" method="post">
      <div>
        <label for="newitem">Add item</label>
        <input type="text" name="newitem" id="newitem" 
               placeholder="new item" />
        <input type="submit" value="Add" />
      </div>
    </form>
     <ul id="todolist"></ul>
  </section>
  
<script>
(function(){

  var todo = document.querySelector( '#todolist' ),
      form = document.querySelector( 'form' ),
      field = document.querySelector( '#newitem' );
    
  form.addEventListener( 'submit', function( ev ) {
    var text = field.value;
    if ( text !== '' ) {
      todo.innerHTML += '<li>' + text + '</li>';
      field.value = '';
      //field.focus();
    }
    ev.preventDefault();
  }, false);



})();
</script>
</body>
</html> 
  
 
Hi I have project for beginning for html javasicript but I trying something. I want to add list delete button but ı don't know how can I add a delete button for each line ? 
 
 
  
  <!DOCTYPE html>
<html lang="en">

<body>
  <header><h1></h1></header>
  <section>
   
    <form action="#" method="post">
      <div>
        <label for="newitem">Add item</label>
        <input type="text" name="newitem" id="newitem" 
               placeholder="new item" />
        <input type="submit" value="Add" />
      </div>
    </form>
     <ul id="todolist"></ul>
  </section>
  
<script>
(function(){

  var todo = document.querySelector( '#todolist' ),
      form = document.querySelector( 'form' ),
      field = document.querySelector( '#newitem' );
    
  form.addEventListener( 'submit', function( ev ) {
    var text = field.value;
    if ( text !== '' ) {
      todo.innerHTML += '<li>' + text + '</li>';
      field.value = '';
      //field.focus();
    }
    ev.preventDefault();
  }, false);



})();
</script>
</body>
</html> 
  
 

                最满意答案
                
                    
                         
 
  
  <!DOCTYPE html>
<html lang="en">

<body>
  <header><h1></h1></header>
  <section>
   
    <form action="#" method="post">
      <div>
        <label for="newitem">Add item</label>
        <input type="text" name="newitem" id="newitem" 
               placeholder="new item" />
        <input type="submit" value="Add" />
      </div>
    </form>
     <ul id="todolist"></ul>
  </section>
  
<script>
(function(){

  var todo = document.querySelector( '#todolist' ),
      form = document.querySelector( 'form' ),
      field = document.querySelector( '#newitem' );
    
  form.addEventListener( 'submit', function( ev ) {
    var text = field.value;
    if ( text !== '' ) {
      todo.innerHTML += '<li>' + text + ' <button onclick="Delete(this);">Delete</button> </li>';
      field.value = '';
      //field.focus();
    }
    ev.preventDefault();
  }, false);



})();
  function Delete(currentEl){
  currentEl.parentNode.parentNode.removeChild(currentEl.parentNode);
  }
</script>
</body>
</html> 
  
 
 
 
  
  <!DOCTYPE html>
<html lang="en">

<body>
  <header><h1></h1></header>
  <section>
   
    <form action="#" method="post">
      <div>
        <label for="newitem">Add item</label>
        <input type="text" name="newitem" id="newitem" 
               placeholder="new item" />
        <input type="submit" value="Add" />
      </div>
    </form>
     <ul id="todolist"></ul>
  </section>
  
<script>
(function(){

  var todo = document.querySelector( '#todolist' ),
      form = document.querySelector( 'form' ),
      field = document.querySelector( '#newitem' );
    
  form.addEventListener( 'submit', function( ev ) {
    var text = field.value;
    if ( text !== '' ) {
      todo.innerHTML += '<li>' + text + ' <button onclick="Delete(this);">Delete</button> </li>';
      field.value = '';
      //field.focus();
    }
    ev.preventDefault();
  }, false);



})();
  function Delete(currentEl){
  currentEl.parentNode.parentNode.removeChild(currentEl.parentNode);
  }
</script>
</body>
</html>

更多推荐

本文发布于:2023-07-31 02:08:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1340456.html