bugfix> javascript > 投稿

私はJavascriptを学ぶのが初めてです。順不同リストの特定のリスト項目を削除したかった。すべてのアイテムには削除ボタンがありますが、インデックスを使用せずに選択したアイテムが自分のボタンであるかどうかをボタンがどのように知るかわかりません。

let enterListBtn = document.getElementById("enter");
let input = document.getElementById("userinput");
let ul = document.querySelector("ul");
let togList = document.getElementsByTagName("li");
let deleteBtn = document.getElementById("delete");
function deleteItem() {
    togList.parentNode.removeChild(togList);
}
deleteBtn.addEventListener("click", deleteItem);

HTML

<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
    <li>Notebook <button id="delete">Delete</button></li>
    <li>Jello <button>Delete</button></li>
    <li>Spinach <button>Delete</button></li>
    <li>Rice <button>Delete</button></li>
    <li>Birthday Cake <button>Delete</button></li>
    <li>Candles <button>Delete</button></li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>

回答 2 件
  • 削除ボタンごとにクラスを追加し、jquery add clickイベントメソッドで、ボタンの親を取得して削除します。このコードを確認してください。

    $('.delete').on('click', function(){
          $(this).parent().remove();
        });
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
        <li>Notebook <button class="delete">Delete</button></li>
        <li>Jello <button class="delete">Delete</button></li>
        <li>Spinach <button class="delete">Delete</button></li>
        <li>Rice <button class="delete">Delete</button></li>
        <li>Birthday Cake <button class="delete">Delete</button></li>
        <li>Candles <button class="delete">Delete</button></li>
    </ul>
    </body>
    
    

  • イベントオブジェクトを使用して要素をターゲットに設定し、 parentNode を使用できます。  要素を削除するには

    // adda common class to all the buttons
    let deleteBtn = document.getElementsByClassName("btn");
    // converting html collection to array, to use array methods
    Array.prototype.slice.call(deleteBtn).forEach(function(item) {
      // iterate and add the event handler to it
      item.addEventListener("click", function(e) {
        e.target.parentNode.remove()
      });
    })
    
    
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
      <li>Notebook <button class="btn" id="delete">Delete</button></li>
      <li>Jello <button class="btn">Delete</button></li>
      <li>Spinach <button class="btn">Delete</button></li>
      <li>Rice <button class="btn">Delete</button></li>
      <li>Birthday Cake <button class="btn">Delete</button></li>
      <li>Candles <button class="btn">Delete</button></li>
    </ul>
    
    

あなたの答え