admin管理员组

文章数量:1357307

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>

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>

  • javascript
  • html
Share Improve this question edited Jul 20, 2016 at 13:42 ReshaD 9463 gold badges18 silver badges30 bronze badges asked Jul 20, 2016 at 11:57 Hafsa Elif ÖzçiftciHafsa Elif Özçiftci 3312 gold badges3 silver badges13 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7 

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

本文标签： javascriptHow can I add delete button on listStack Overflow

版权声明：本文标题：javascript - How can I add delete button on list? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743969797a2570549.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。