使用javascript定義關閉按鈕 -有解無憂

我正在制作一個自定義的Todo串列，一切都很好，除了串列的關閉按鈕，它不作業，你能給我一個解決方案嗎？我有一個關閉按鈕的源代碼，如果你知道更簡單的方法，請告訴我...我不明白這個關閉按鈕的源代碼，不知道如何修復它.

這里是js代碼：

。

let submit = document. getElementsByClassName('addbutton')[0] 。
let ul = document.getElementsByTagName('ul') [0] 。
let display = document.getElementById('db') 。
let li = document.createElement（'li'）。
li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> ' 
              顯示。
             
submit.addEventListener('click', function Addlist() {
  ul.innerHTML  = '<li class="list_style">'  
                  '<input type ="submit" value="&#215" class ="unicodes" /> '
                  display.value 
                  '</li>'。
});

//這里是關閉按鈕的源代碼。
var close = document.getElementsByClassName("unicodes") 。
var i;
for (i = 0; i < close.length; i  ) {
  close[i].onclick = function（） {
    var div = this.parentElement;
    div.style.display = "none"。
  }
}

* {
  padding: 0;
  margin: 0;
  }
body {
  background-image: url('wallpaper.jpg') 。
  background-size: cover;
  background-repeat: no-repeat;
  }
header h1 {
  color: white;
  字體大小: 2em;
  padding: 30px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
.main-sec {
  background-color: rgba（255, 0, 0, 0.521）。
  width: 495px;
  height: 632px;
  border-radius: 25px;
  margin-left: 100px;
  }
.logo {
  width: 50px;
  height: 50px;
  padding: 16px 0 0 16px;
  }
.logo:hover {
  opacity: 0.7;
  transition: 1s;
  transform: rotate(360deg)
  }
.frame {
  float: right;
  width: 465px;
  height: 624px;
  margin: -8px 15px 15px 15px;
  border-radius: 25px;
  border: 1px solid rgb（0, 0, 0）。
  }
.add_todo {
  width: 254px;
  height: 41px;
  background-color: white;
  border-radius: 0 7px 7px 0;
  outline: none;
  border: none;
  margin-right: 12%;
  padding: 0 10px;
  text-align: left;
  字體大小: 1em;
  }
.addbutton {
  float: left;
  字體大小: 1.2em;
  padding: 0px 5px;
  margin-left: 51.5px;
  margin-top: -0.1px;
  height: 42.5px;
  }
.addbutton:hover {
  transition: 1s;
  background-color: rgb（0, 0, 0）。
  color: rgb(255, 0, 0) 。
  }
.list_style {
  width: 254px;
  height: 33px;
  background-color: white;
  border-radius: 7px;
  outline: none;
  border: none;
  margin-right: 12%;
  padding: 0 10px;
  text-align: center;
  margin-top: 12px;
  list-style: none;
  字體大小: 1.2em;
  padding-top: 9px;
  }
.unicodes {
  float: left;
  height: 42px;
  width: 42px;
  margin: -9px;
  border-radius: 7px;
  border: none;
  字體大小: 1.5em;
  }
.unicodes:hover {
  background-color: rgb（165, 165, 165）。
  color: red;
  transition: 1s;
  }

<header> 
  <h1>/span>
    待辦事項串列:
  </h1>待辦事項 : </h1>
</header>/span>
<section class="main-sec"> 
  < fieldset class="frame" dir="rtl">>
    <legend>/span>
      <img src="konoha. png" class="logo"> 
    </legend>/span>
    <button class="addbutton"/span>>  AddTitle </button>。
    < input type="text" class="add_todo" id="db" /> 
    <ul> 
      <li class="list_style"> 
        <input type="submit" value="&。 #215" class="unicodes" /> 測驗前臺
      </li>測驗前臺。
    </ul>/span>
  </fieldset> 
</section>/span>

uj5u.com熱心網友回復：

我不太確定問題出在哪里，但我只是去了給html元素的remove函式，而且......它應該可以作業，請告訴我發生了什么;-;

let submit = document. getElementsByClassName('addbutton')[0] 。
let ul = document.getElementsByTagName('ul') [0] 。
let display = document.getElementById('db') 。
let li = document.createElement（'li'）。
li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> '   display;
submit.addEventListener('click', function Addlist() {
  ul.innerHTML  = '<li class="list_style">'   '<input type ="submit" value="& #215" class ="unicodes" />'   display. value   '</li> ';
});

//這里是關閉按鈕的源代碼。
var close = document.getElementsByClassName("unicodes") 。
var i;
for (i = 0; i < close.length; i  ) {
  close[i].onclick = function() { //CHANGE MADE(under)/span>
    close[i].remove() //button should disappear when clicked. Not sure if that's what you want。
  } //CHANGE MADE(overly) }

}

uj5u.com熱心網友回復：

你沒有為新創建的元素系結關閉動作。將關閉功能移到一個函式中，并在創建后呼叫它（或）作為onclick屬性呼叫關閉功能。像下面這樣替換js代碼，它應該可以作業。

let submit = document. getElementsByClassName('addbutton')[0] 。
let ul = document.getElementsByTagName('ul') [0] 。
let display = document.getElementById('db') 。
let li = document.createElement（'li'）。
li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> '   display;
submit.addEventListener('click', function Addlist() {
  ul.innerHTML  = '<li class="list_style">'   '<input type ="submit" value="& #215" class ="unicodes" />'   display. value   '</li> ';
closeEventBinding（）。
});

//這里是關閉按鈕的源代碼。
function closeEventBinding（）{
var close = document.getElementsByClassName("unicodes") 。
var i;
for (i = 0; i < close.length; i  ) {
  close[i].onclick = function（） {
    var div = this.parentElement;
    div.style.display = "none"。
  }

}

uj5u.com熱心網友回復：

關閉按鈕的代碼只在腳本加載后發生，并且只覆寫現有的todos（在這種情況下只有一個）。

你需要在每次創建時定義關閉按鈕的動作。

let submit = document.getElementsByClassName('addbutton') [0] 。
let ul = document.getElementsByTagName('ul') [0];
let display = document.getElementById('db') 。
// let li = document.createElement('li'); 
// li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> '   display;
submit.addEventListener('click', function Addlist()  {
  // NOTICE: to each button add the onclick event  
  ul.innerHTML  = `<li class="list_style"/span>>
                    <input type="submit" value="& #215" onclick="this. parentElement.style.display='none'" class="unicodes" />${display.value}。
                   </li>`。
});

//這里是關閉按鈕的源代碼。
//var close = document.getElementsByClassName("unicodes"); 
//var i;
//for (i = 0; i < close.length; i  ) {
// close[i].onclick = function（） {
//var div = this.parentElement;
// div.style.display = "none";
// }

// }

uj5u.com熱心網友回復：

如果你想洗掉你的待辦事項串列，你可以通過呼叫一個函式來洗掉待辦事項串列，使用一個觸發器。

// Add TODO
let submit = document.getElementsByClassName('addbutton') [0] 。
let ul = document.getElementsByTagName('ul') [0] 。
let display = document.getElementById('db') 。
let li = document.createElement（'li'）。

li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> '   display。
//Trigger close in html
close()
submit.addEventListener('click', function() {
  ul.innerHTML  = '<li class="list_style">'   '<input type ="submit" value="& #215" class ="unicodes" />'   display. value   '</li> ';

  //trigger close if todo has new element.
  close()
});

//洗掉TODO
function close（） {
  //查找所有元素關閉。
  let close = document.querySelectorAll(".unicodes") 。
  //回圈所有元素。
  close.forEach(element => {
    // If element has click 
    element.addEventListener('click', function() {
      ///獲得一個父類并洗掉這個。
      element.parentElement.remove（）。
    });
  });
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/331518.html

標籤：

上一篇：如何使用axios將資料發布為陣列物件

下一篇：對于任何給定的Dom結點，找到具有css風格的結點