一个删除包含Javascript中特定文本的div元素的函数

Question

我写了一个简单的代码，它从输入字段中获取文本，将其存储为数组中的字符串，并在每次"添加"；按钮被按下。

然后是一个"；删除"；按钮，如果输入与数组中的项匹配，则从数组中删除该项。

我需要一个函数来删除之前创建的div，其中的文本与当前输入相同。

例如，如果我键入"；book1"；按下"；添加"-数组获取"book1"作为第一项；book1"；被创建；book2"book3"；等等。如果我键入"book2"并按remove，它就会从数组中删除，并且应该删除相应的div。

最后一个函数我就是想不通。

let addBtn = document.getElementById("add-btn");
let removeBtn = document.getElementById("rmv-btn");
let bookArray = [];
addBtn.addEventListener("click", addBook);
removeBtn.addEventListener("click", removeBook);
let innerDiv = document.body.newDiv.innerHTML
function addBook() {
newBook = document.getElementById("input").value;
if (newBook != '') {
bookArray.push(newBook);
addElement();
clear();
console.log(bookArray);
} else {
clear();
console.log(bookArray);
}
}
function removeBook() {
inputBook = document.getElementById("input").value;
for (i = 0; i < bookArray.length; i++) {
if (inputBook.toString() === bookArray[i].toString()) {
bookArray.splice([i], 1);
console.log(bookArray);
removeElement()
return;
} else {
clear();
}
}
console.log(bookArray);
}
function clear() {
document.getElementById("input").value = "";
}
function addElement() {
let newDiv = document.createElement("div");
newDiv.innerHTML = newBook;
my_div = document.getElementById("mydiv");
document.body.appendChild(newDiv, my_div);
}
function removeElement() { 
alert("this bit needs working out");//???
}

<input type="text" id="input" />
<button id="add-btn">Add</button>
<button id="rmv-btn">Remove</button>
<div id="mydiv"></div>
</div>

Answer 1

您需要更改添加div的方式，因为它是在外部添加的，而不是my_div 的子级

let addBtn = document.getElementById("add-btn");
let removeBtn = document.getElementById("rmv-btn");
let bookArray = [];
addBtn.addEventListener("click", addBook);
removeBtn.addEventListener("click", removeBook);


function addBook() {
newBook = document.getElementById("input").value;
if (newBook != '') {
bookArray.push(newBook);
addElement();
clear();
console.log(bookArray);
} else {
clear();

console.log(bookArray);
}
}

function removeBook() {
inputBook = document.getElementById("input").value;
for (i = 0; i < bookArray.length; i++) {
if (inputBook.toString() === bookArray[i].toString()) {
bookArray.splice([i], 1);
console.log(bookArray);
removeElement(i);
return;
} else {
clear();
}
}
console.log(bookArray);
}

function clear() {
document.getElementById("input").value = "";
}

function addElement() {    
let newDiv = document.createElement("div");
// count number of children in mydiv
let count = document.getElementById("mydiv").childElementCount;

// add an id

newDiv.id = 'mydiv-' + count;
newDiv.innerHTML = newBook;

my_div = document.getElementById("mydiv");
my_div.appendChild(newDiv, my_div);
}

function removeElement(el) { 
// remove html element from dom
let my_div = document.getElementById("mydiv");
my_div.removeChild(my_div.childNodes[el]);
}

Answer 2

用户按input值删除书本的解决方法：
将addElement功能修改为：

function addElement() {
let newDiv = document.createElement("div");
newDiv.innerHTML = newBook;
newDiv.setAttribute('data-book-name', newBook); //new added line | setting data attribute
my_div = document.getElementById("mydiv");
document.body.appendChild(newDiv, my_div);
}

removeElement将是：

function removeElement() { 
document.querySelector('[data-book-name="'+ newBook +'"]')?.remove();
}

但这将删除DOM中的第一本书。如果你想删除所有同名书籍，请使用：

function removeElement() { 
var books = document.querySelectorAll('[data-book-name="'+ newBook +'"]');
if(books.length == 0) return;
books.forEach(x => x.remove())
}