如何清除从js创建的内容?

Question

我试图修复一个问题，我有两个输入和用户插入两个数字后(第一个用于单词长度和第二个用于单词计数)，这些单词和它们的对象值将出现在HTML选项卡中。找不到一种方法来清除与JS生成的内容。在本例中，我创建了一个HTML元素及其内容，但在再次调用函数后无法清除它们，因此表的内容是递增的。

尝试使用replaceChildren()，但没有帮助。

let contentDiv = document.querySelector('.content')
let objectsArr = []
function wordsCreation() {
const symbolsNumber = Number(document.querySelector('#symbol').value);
const wordsNumber = Number(document.querySelector('#word').value);
const lettersArr = 'abcdefghijklmnopqrstuvwxyzABCDEFJHIJKLMNOPQRSTUVWXYZ';
const vowelsArr = ['a', 'e', 'i', 'o', 'u'];
contentDiv.innerHTML = ''

for (let i = 0; i < wordsNumber; i++) {
let createdWord = ''
let lowerCase = 0;
let uppererCase = 0;
let vowel = 0;
let consonant = 0;
for (let counter = 0; counter < symbolsNumber; counter++) {
let randomLetter = lettersArr[parseInt((Math.random() * 52))];
// დაითვლის მაღალი და დაბლი რეგისტრის ასოებს
randomLetter != randomLetter.toLowerCase() ? uppererCase++ : lowerCase++;
// დაითვლის ხმოვნებს და თანხმოვნებს
for (let i of vowelsArr) {
if (randomLetter == i || randomLetter.toLowerCase() == i) {
vowel++
}
}
createdWord += randomLetter
}
consonant = createdWord.length - vowel
let createdTag = document.createElement('p')
if (vowel > consonant) {
createdTag.style.color = 'red'
} else if (vowel < consonant) {
createdTag.style.color = 'blue'
} else {
createdTag.style.color = 'green'
}
createdTag.innerText = createdWord
contentDiv.appendChild(createdTag)
let emptyObject = {
'word': `${createdWord}`,
'vowel': `${vowel}`,
'consonant': `${consonant}`,
'uppererCase': `${uppererCase}`,
'lowerCase': `${lowerCase}`
}
objectsArr.push(emptyObject)
}
let tableRowCounter = objectsArr.length
let tableDataCounter = Object.keys(objectsArr[0]).length
let table = document.createElement('table')
contentDiv.appendChild(table)

for (let a = 0; a < 1; a++) {
let tr = document.createElement('tr')
for (let b = 0; b < tableDataCounter; b++) {
let th = document.createElement('th')
th.innerText = Object.keys(objectsArr[a])[b]
tr.appendChild(th)
}
table.appendChild(tr)
}
for (let a = 0; a < tableRowCounter; a++) {
let tr = document.createElement('tr')
for (let b = 0; b < tableDataCounter; b++) {
let td = document.createElement('td')
td.innerText = Object.values(objectsArr[a])[b]
tr.appendChild(td)
}
table.appendChild(tr)
}
}

body {
background-color: rgb(9, 9, 34);
color: white;
font-size: 1.5rem;
}
table,
th,
td {
border: 1px solid white;
border-collapse: collapse;
}

<div class="container">
<label for="symbol">სიმბოლოების რაოდენობა</label>
<input type="text" name="" id="symbol">
<br>
<label for="word">სიტყვების რაოდენობა</label>
<input type="text" name="" id="word">
<br>
<button onclick="wordsCreation()">Generate to Table</button>
<div class="content"></div>
</div>

Answer 1

您只需要将let objectsArr = [];声明移动到函数内部。

let contentDiv = document.querySelector('.content')
// let objectsArr = []; // <== Cut from here...
function wordsCreation() {
let objectsArr = []; // <== ...Move here
const symbolsNumber = Number(document.querySelector('#symbol').value);
const wordsNumber = Number(document.querySelector('#word').value);
const lettersArr = 'abcdefghijklmnopqrstuvwxyzABCDEFJHIJKLMNOPQRSTUVWXYZ';
const vowelsArr = ['a', 'e', 'i', 'o', 'u'];
contentDiv.innerHTML = ''

for (let i = 0; i < wordsNumber; i++) {
let createdWord = ''
let lowerCase = 0;
let uppererCase = 0;
let vowel = 0;
let consonant = 0;
for (let counter = 0; counter < symbolsNumber; counter++) {
let randomLetter = lettersArr[parseInt((Math.random() * 52))];
// დაითვლის მაღალი და დაბლი რეგისტრის ასოებს
randomLetter != randomLetter.toLowerCase() ? uppererCase++ : lowerCase++;
// დაითვლის ხმოვნებს და თანხმოვნებს
for (let i of vowelsArr) {
if (randomLetter == i || randomLetter.toLowerCase() == i) {
vowel++
}
}
createdWord += randomLetter
}
consonant = createdWord.length - vowel
let createdTag = document.createElement('p')
if (vowel > consonant) {
createdTag.style.color = 'red'
} else if (vowel < consonant) {
createdTag.style.color = 'blue'
} else {
createdTag.style.color = 'green'
}
createdTag.innerText = createdWord
contentDiv.appendChild(createdTag)
let emptyObject = {
'word': `${createdWord}`,
'vowel': `${vowel}`,
'consonant': `${consonant}`,
'uppererCase': `${uppererCase}`,
'lowerCase': `${lowerCase}`
}
objectsArr.push(emptyObject)
}
let tableRowCounter = objectsArr.length
let tableDataCounter = Object.keys(objectsArr[0]).length
let table = document.createElement('table')
contentDiv.appendChild(table)

for (let a = 0; a < 1; a++) {
let tr = document.createElement('tr')
for (let b = 0; b < tableDataCounter; b++) {
let th = document.createElement('th')
th.innerText = Object.keys(objectsArr[a])[b]
tr.appendChild(th)
}
table.appendChild(tr)
}
for (let a = 0; a < tableRowCounter; a++) {
let tr = document.createElement('tr')
for (let b = 0; b < tableDataCounter; b++) {
let td = document.createElement('td')
td.innerText = Object.values(objectsArr[a])[b]
tr.appendChild(td)
}
table.appendChild(tr)
}
}

body {
background-color: rgb(9, 9, 34);
color: white;
font-size: 1.5rem;
}
table,
th,
td {
border: 1px solid white;
border-collapse: collapse;
}

<div class="container">
<label for="symbol">სიმბოლოების რაოდენობა</label>
<input type="text" name="" id="symbol">
<br>
<label for="word">სიტყვების რაოდენობა</label>
<input type="text" name="" id="word">
<br>
<button onclick="wordsCreation()">Generate to Table</button>
<div class="content"></div>
</div>

Answer 2

您可以使用wordsCreation()开头调用的一个函数来清除HTML和数组

function clearContent() {
contentDiv.innerHTML = '';
objectsArr = [];
}

您还可以添加一个按钮来清除内容(但这是可选的)，如:

<button onclick="clearContent()">Clear Content</button>

另一个注意事项，我将内容div更改为通过ID(而不是类)来识别，因为ID应该是唯一的。按类查询div会给你错误，如果你最终有多个元素具有相同的类名(即<p class="content">)，因为下面的代码假设只会找到一个项目(contentDiv)。

let contentDiv = document.getElementById("content");
let objectsArr = []
function clearContent() {
contentDiv.innerHTML = '';
objectsArr = [];
}

function wordsCreation() {
clearContent();

const symbolsNumber = Number(document.querySelector('#symbol').value);
const wordsNumber = Number(document.querySelector('#word').value);
const lettersArr = 'abcdefghijklmnopqrstuvwxyzABCDEFJHIJKLMNOPQRSTUVWXYZ';
const vowelsArr = ['a', 'e', 'i', 'o', 'u'];
for (let i = 0; i < wordsNumber; i++) {
let createdWord = ''
let lowerCase = 0;
let uppererCase = 0;
let vowel = 0;
let consonant = 0;
for (let counter = 0; counter < symbolsNumber; counter++) {
let randomLetter = lettersArr[parseInt((Math.random() * 52))];
// დაითვლის მაღალი და დაბლი რეგისტრის ასოებს
randomLetter != randomLetter.toLowerCase() ? uppererCase++ : lowerCase++;
// დაითვლის ხმოვნებს და თანხმოვნებს
for (let i of vowelsArr) {
if (randomLetter == i || randomLetter.toLowerCase() == i) {
vowel++
}
}
createdWord += randomLetter
}
consonant = createdWord.length - vowel
let createdTag = document.createElement('p')
if (vowel > consonant) {
createdTag.style.color = 'red'
} else if (vowel < consonant) {
createdTag.style.color = 'blue'
} else {
createdTag.style.color = 'green'
}
createdTag.innerText = createdWord
contentDiv.appendChild(createdTag)
let emptyObject = {
'word': `${createdWord}`,
'vowel': `${vowel}`,
'consonant': `${consonant}`,
'uppererCase': `${uppererCase}`,
'lowerCase': `${lowerCase}`
}
objectsArr.push(emptyObject)
}
let tableRowCounter = objectsArr.length
let tableDataCounter = Object.keys(objectsArr[0]).length
let table = document.createElement('table')
contentDiv.appendChild(table)

for (let a = 0; a < 1; a++) {
let tr = document.createElement('tr')
for (let b = 0; b < tableDataCounter; b++) {
let th = document.createElement('th')
th.innerText = Object.keys(objectsArr[a])[b]
tr.appendChild(th)
}
table.appendChild(tr)
}
for (let a = 0; a < tableRowCounter; a++) {
let tr = document.createElement('tr')
for (let b = 0; b < tableDataCounter; b++) {
let td = document.createElement('td')
td.innerText = Object.values(objectsArr[a])[b]
tr.appendChild(td)
}
table.appendChild(tr)
}
}

body {
background-color: rgb(9, 9, 34);
color: white;
font-size: 1.5rem;
}
table,
th,
td {
border: 1px solid white;
border-collapse: collapse;
}

<div class="container">
<label for="symbol">სიმბოლოების რაოდენობა</label>
<input type="text" name="" id="symbol">
<br>
<label for="word">სიტყვების რაოდენობა</label>
<input type="text" name="" id="word">
<br>
<button onclick="wordsCreation()">Generate to Table</button>
<button onclick="clearContent()">Clear Content</button>
<div id="content"></div>
</div>