添加和删除元素的 onclick 事件

Question

我正在尝试创建一个可以多次添加和删除元素的 onclick 事件。我考虑过使用 setproperty 并更改 visibility（以及 :after 伪 class），但它需要更改 position 这会破坏很多文档中的东西。到目前为止，我只能想出添加元素一次，然后删除一次的方法。有没有办法让这种情况发生不止一次（每次单击元素时）？

// Create New Element
let html = document.createElement('p');
html.className = 'skills';
html.id = 'html-skills';
html.setAttribute('title', 'HTML5 Proficiency');
html.appendChild(document.createTextNode('5%'));
html.style.setProperty('font-size', '16px')
// Grab Old Element
const oldHTML = document.getElementById('html');
// On Click function to add element
oldHTML.addEventListener('click', onClick);
function onClick(e) {
    document.getElementById('htmlJS').appendChild(html)
}
// On click function to remove element
const htmlJS = document.getElementById('htmlJS')
html.addEventListener('click', removeHTML);
function removeHTML(e) {
    let newHTML = document.getElementById("htmlJS");
    let htmlNested = document.getElementById("htmlJS").lastChild;
   
    htmlNested.lastChild.remove();
}

 <script
      src="https://kit.fontawesome.com/d3d2bbf2ae.js"
      crossorigin="anonymous"
 ></script>
 
 <div class="skills-list__1 skills-icons" id="skills1">
  <i class="fab fa-html5 html" id="html" title="HTML5"><div id="htmlJS"></div></i>
 </div>

Answer 1

您不能重用 onClick 函数（使 '5%' html）的原因是您用 removeHTML 函数覆盖了该函数。我使用一个事件函数来编写和删除内部 html 文本。有很多方法可以满足您的需求。希望你自己尝试。

// Create New Element
let html = document.createElement('p');
html.className = 'skills';
html.id = 'html-skills';
html.setAttribute('title', 'HTML5 Proficiency');
html.appendChild(document.createTextNode(''));
html.style.setProperty('font-size', '16px')
document.getElementById('htmlJS').appendChild(html)
// Grab Old Element
const oldHTML = document.getElementById('html');
// On Click function to add element
oldHTML.addEventListener('click', onClick);
function onClick(e) {
if (html.innerHTML === '') {
  html.innerHTML = '5%'
  } else {
  html.innerHTML = ''
  }
}
// On click function to remove element
//Whatever you named this htmlJS id it still has onCLick function.
const htmlJS = document.getElementById('htmlJS')
html.addEventListener('click', removeHTML);
function removeHTML(e) {
    let newHTML = document.getElementById("htmlJS");
    let htmlNested = document.getElementById("htmlJS").lastChild;   
}

 <script
      src="https://kit.fontawesome.com/d3d2bbf2ae.js"
      crossorigin="anonymous"
 ></script>
 
 <div class="skills-list__1 skills-icons" id="skills1">
  <i class="fab fa-html5 html" id="html" title="HTML5"><div id="htmlJS"></div></i>
 </div>

添加和删除元素的 onclick 事件

Onclick event to add and remove element

javascript

css

onclick

添加和删​​除元素的 onclick 事件

Onclick event to add and remove element

javascript

css

onclick

添加和删除元素的 onclick 事件