用于添加和删除元素的 Onclick 事件

Question

我正在尝试创建一个可以多次添加和删除元素的 onclick 事件。我已经考虑过使用setproperty和更改visibility（以及:after伪类），但它需要更改，这会position破坏文档中的很多内容。到目前为止，我只能想出添加元素一次，然后删除元素一次的方法。有没有办法让这种情况发生多次（每次单击该元素时）？// Create New Elementlet 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 Elementconst oldHTML = document.getElementById('html');// On Click function to add elementoldHTML.addEventListener('click', onClick);function onClick(e) {    document.getElementById('htmlJS').appendChild(html)}// On click function to remove elementconst 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>