由于某种原因，我无法删除JavaScript生成的任何building-x元素。所以我想知道为什么？
因此，我稍稍更改了代码，最终在HTML中添加了building-x来查看是否可以解决问题，一旦这样做，它就删除了生成的building-x的HTML版本，但我仍然无法删除生成的Building-x的JavaScript版本。
要删除JavaScript生成的building-x版本，我该怎么做？
这是我的代码
<!-- pdf viewer supportes on all browsers this script is mainly used to display all the page of pdf in scroll method .
beacause norrmal click is already mentioned in pdf.js documentation -->
<div class="container">
<div class="row">
<div id="navbar" class="controls">
<button type="button" class="btn-zoom pls" onclick="zoomin()"><span>+</span> </button>
<button type="button" class="btn-zoom min" onclick="zoomout()"><span>-</span> </button>
</div>
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<div id="pdf-viewer" class="pdf-viewer"></div>
</div>
<style>
.pdf
{
over-flow:scroll;
width:540px;
}
.pdf-viewer
{
width:auto;
display:block;
margin:0 auto;
border:1px solid red;
}
canvas
{
width:100%;
}
</style>
<script>
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
var thePdf = null;
var scale =2.3;
pdfjsLib.getDocument(url).promise.then(function(pdf) {
thePdf = pdf;
viewer = document.getElementById('pdf-viewer');
for(page = 1; page <= pdf.numPages; page++) {
canvas = document.createElement("canvas");
canvas.className = 'pdf-page-canvas';
viewer.appendChild(canvas);
renderPage(page, canvas);
}
});
function renderPage(pageNumber, canvas) {
thePdf.getPage(pageNumber).then(function(page) {
viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
// page.render({canvasContext: canvas.getContext('2d'), viewport: viewport});
page.render({canvasContext: canvas.getContext('2d'), viewport: viewport}).promise.then(function () {
if (thePdf.numPages === pageNumber)
// document.getElementById('loader').style.display=='none';
$('#loader').hide();
$('.pdf-viewer').show();
});
});
}
//zoom functionality
function zoomin(){
var myImg = document.getElementById("pdf-viewer");
var currWidth = myImg.clientWidth;
var currHeight = myImg.clientHeight;
//if(currWidth == 2500) return false;
// else{
// myImg.style.width = (currWidth + 100) + "px";
//}
myImg.style.width = (currWidth + 50) + "px";
myImg.style.height = (currHeight + 50) + "px";
}
function zoomout(){
var myImg = document.getElementById("pdf-viewer");
var currWidth = myImg.clientWidth;
var currHeight = myImg.clientHeight;
// if(currWidth == 100000) return false;
// else{
myImg.style.width = (currWidth - 50) + "px";
myImg.style.height= (currHeight- 50) + "px";
// }
}
</script>
document.addEventListener('DOMContentLoaded',function(){
/*<Add another building>*/
document.querySelector('#add-another-building').addEventListener('click',addAnotherBuilding);
function addAnotherBuilding(){
if(document.querySelector(".building-x")){
document.querySelector(".building-x").insertAdjacentHTML("afterend","<div class='building-x'></div>");
}
else{
document.querySelector("#first-building").insertAdjacentHTML("afterend","<div class='building-x'></div>");
}
}
/*</Add another building>*/
/*<Remove the targeted buildingX>*/
if(document.querySelector('.building-x')){
var buildingXs= document.querySelectorAll('.building-x');
for(var i=0; i < buildingXs.length; i++){
buildingXs[i].addEventListener('click',removeTheTargetedBuildingX);
}
function removeTheTargetedBuildingX(event){
var removeTheTargetedBuildingX = event.currentTarget;
removeTheTargetedBuildingX.parentNode.removeChild(removeTheTargetedBuildingX);
}
}
/*</Remove the targeted buildingX>*/
});#buildings{
background-color: gray;
}
#first-building{
background-color: red;
height: 150px;
width: 50px;
display: inline-block;
}
#add-another-building{
margin-bottom: 25px;
display: block;
}
.building-x{
background-color: blue;
display: inline-block;
height: 100px;
width: 50px;
margin-left: 5px;
margin-right: 4px;
margin-bottom: 5px;
}
答案 0 :(得分：1)
最初的问题是，添加侦听器的代码部分在开始时仅运行一次，而此时没有building-x。因此，没有js生成的building-x能够获得监听器。
当您添加开始的html building-x时，该听众会收到一个侦听器，但随后的js生成的building-x不会。
解决方案是在添加js建筑物x之后调用add-listener代码。在下面的示例中，我删除了html-starting building-x。
document.addEventListener('DOMContentLoaded',function(){
/*<Add another building>*/
document.querySelector('#add-another-building').addEventListener('click',addAnotherBuilding);
function addAnotherBuilding(){
if(document.querySelector(".building-x")){
document.querySelector(".building-x").insertAdjacentHTML("afterend","<div class='building-x'></div>");
}
else{
document.querySelector("#first-building").insertAdjacentHTML("afterend","<div class='building-x'></div>");
}
addListener();
}
/*</Add another building>*/
/*<Remove the targeted buildingX>*/
function addListener() {
var buildingXs = document.querySelectorAll('.building-x');
for(var i=0; i < buildingXs.length; i++){
if (buildingXs[i].classList.contains("listening") === false) {
buildingXs[i].addEventListener('click',removeTheTargetedBuildingX);
buildingXs[i].classList.add("listening");
}
}
}
function removeTheTargetedBuildingX(event){
var removeTheTargetedBuildingX = event.currentTarget;
removeTheTargetedBuildingX.parentNode.removeChild(removeTheTargetedBuildingX);
}
});#buildings{
background-color: gray;
}
#first-building{
background-color: red;
height: 150px;
width: 50px;
display: inline-block;
}
#add-another-building{
margin-bottom: 25px;
display: block;
}
.building-x{
background-color: blue;
display: inline-block;
height: 100px;
width: 50px;
margin-left: 5px;
margin-right: 4px;
margin-bottom: 5px;
}<button id='add-another-building'>Add another building</button>
<div id='buildings'>
<div id='first-building'></div><!--</first-building>-->
</div><!--</buildings>-->