为什么Node.removeChild抛出错误？

时间：2019-04-11 22:09:37

标签： javascript

为什么Node.removeChild（）不起作用，它在我的JavaScript文件的最后一部分？我知道CSS / HTML并不完美。大多数HTML来自模板。我真的很在意JavaScript。 Node.removeChild（）方法从DOM中移除一个子节点并返回移除的节点。我不需要移除的节点。

const mainHeader = document.querySelector(".main-header") ;
const mainFooter = document.querySelector(".main-footer") ;
const container = document.querySelector(".container") ;
const bottomSearch = document.getElementById("bottomsearch") ;
const bottomSearchButton = document.getElementById("bottomsearchbutton") ;
const bottomSearchButtonRemove = document.getElementById("bottomsearchbuttonremove")
/*the following two event listeners change the li tags of the main header stylistically */

mainHeader.addEventListener("mouseover", (event) => {
  if(event.target.tagName === "LI") {
    event.target.textContent = event.target.textContent.toLowerCase() ;
    event.target.style.color = "red" ;
  }
}) ;
mainHeader.addEventListener("mouseout", (event) => {
  if(event.target.tagName === "LI") {
    event.target.textContent = event.target.textContent.toUpperCase();
    event.target.style.color = "black" ;
  }
}) ;

/*the following two event listeners change the li tags of the main footer stylistically */

mainFooter.addEventListener("mouseover", (event) => {
  if(event.target.tagName === "LI") {
    event.target.textContent = event.target.textContent.toLowerCase() ;
    event.target.style.color = "pink" ;
  }
}) ;
mainFooter.addEventListener("mouseout", (event) => {
  if(event.target.tagName === "LI") {
    event.target.textContent = event.target.textContent.toUpperCase();
    event.target.style.color = "black" ;
  }
}) ;

/*the following two event listeners change the cursor when it hovers over an image*/

container.addEventListener("mouseover", (event) => {
  if(event.target.tagName === "IMG") {
    event.target.style.cursor = "crosshair" ;
  }
}) ;

bottomSearch.addEventListener("mouseenter", (event) => {
  event.target.style.backgroundColor = "red" ;
}) ;

bottomSearchButton.addEventListener("click", () => {
  let makeThisAHeading = document.createElement("h1");
  makeThisAHeading.textContent = bottomSearch.value ;
  mainHeader.appendChild(makeThisAHeading) ;
  bottomSearch.value = "" ;
}) ;

bottomSearchButtonRemove.addEventListener("click", () => {
  let removeLastChild = document.querySelector(".main-header:last-child") ;
  mainHeader.removeChild(removeLastChild) ;
}) ;
html {
  font-size: 16px;
  box-sizing: border-box;
}

/************************
HEADER
************************/

/********
BLOCKS
*********/


.main-header {
  text-align: center;
  padding: 0.1rem;
  width: 100%;
}


/********
ELEMENTS
*********/

.main-header__name {
  margin: 0.15rem 0;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.main-header__main-nav {
  padding-left: 0;
  list-style-type: none;
  margin-top: 0;
}

.main-header__main-nav__a-remove-decoration {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  display: block;
}

.main-header__main-nav__li-padding-top{
  padding-top: 0.50rem;
}

/********
MODIFIERS
*********/


/************************
BANNER
************************/

/********
BLOCKS
*********/
.banner {
  background-color: #3acec2;
  width: 100%;
  padding: 0.25rem;
  color: #fff;
}

/********
ELEMENTS
*********/
.banner__logo {
  width: 12.5rem;
  height: 12.5rem;
  display: block;
  margin: 0 auto;
}

.banner__headline {
  text-align: center;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.banner__tagline {
  text-align: center;
  font-size: 1.25rem;
  /* text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15); */
}

/********
MODIFIERS
*********/


/************************
MAIN SECTION
************************/

/********
BLOCKS
*********/
.container {
  margin: 0 auto;
  width: 80%;
  line-height: 1.5;
}




/********
ELEMENTS
*********/

.container__heading,
.container__secondary__heading {
  text-align: center;
}

.container__column {
  width: 90%;
  margin: 0 auto;
}

/********
MODIFIERS
*********/


/************************
FOOTER
************************/

/********
BLOCKS
*********/
.main-footer {
  width: 100%;
  padding: 0.1rem;
}

.footer-content {
  width: 100%;
  padding: 0.1rem;
}



/********
ELEMENTS
*********/



.main-footer__heading {
  text-align: center;
}

.main-footer__list {
  text-align: left;
  list-style-type: circle;
}

.main-footer__heading {
  margin: 0.15rem 0;
}

/* .main-footer__list {
  padding: 0;
} */

.main-footer__nav__a-remove-decoration {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  display: block;
}

.main-footer__nav__li {
  padding-top: 0.50rem;
  /* list-style-type: circle; */
}

.main-footer__copyright {
  text-align: center;
  padding-top: 0.50rem;
}


/********
MODIFIERS
*********/
/* @media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... } */


/************************
MEDIA QUERIES
************************/
@media (min-width: 48rem) {
/************************
HEADER
************************/

/********
BLOCKS
*********/
.main-header {
  display: flex;
  flex-direction: column;
}

/********
ELEMENTS
*********/
.main-header__name {
  /* text-shadow: none; */
}
.main-header__main-nav {
  display: flex;
  width: 100%;
  flex-grow: 1;
  justify-content: center;
}

.main-header__main-nav__li-flexgrow {
  flex-grow: 1;
}


/********
MODIFIERS
*********/

/************************
BANNER
************************/

/********
BLOCKS
*********/

/********
ELEMENTS
*********/

/********
MODIFIERS
*********/

/************************
MAIN SECTION
************************/

/********
BLOCKS
*********/
.container {
  width: 95%;
}

/********
ELEMENTS
*********/

/********
MODIFIERS
*********/

/************************
FOOTER
************************/

/********
BLOCKS
*********/
.footer-content {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}
/********
ELEMENTS
*********/
.main-footer__list-column {
  flex-basis: 11.25rem ;
  flex-grow: 1;
}

.main-footer__list {
  list-style-type: none;
  text-align: center;
  padding-left: 0;
}

/********
MODIFIERS
*********/


}

@media (min-width: 62rem) {
  /************************
  HEADER
  ************************/

  /********
  BLOCKS
  *********/
  .main-header {
    flex-direction: row;
    justify-content: space-between;
    height: 4rem;
    align-items: center;
    position: fixed ;
    top: 0;
    background: #fff;
    box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.4);
  }

  /********
  ELEMENTS
  *********/

  .main-header__main-nav {
    width: 50%;
    flex-grow: 0;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 0;
  }

  .main-header__main-nav__a-remove-decoration {
    display: inline;
  }

  .main-header__main-nav__li-padding-top{
    padding-top: 0;
    margin-bottom: 0;
  }

  .main-header__name {
    margin: 0;
  }

  /********
  MODIFIERS
  *********/

  /************************
  BANNER
  ************************/

  /********
  BLOCKS
  *********/
  .banner {
    padding-top: 4.323125rem ;
  }

  /********
  ELEMENTS
  *********/

  /********
  MODIFIERS
  *********/

  /************************
  MAIN SECTION
  ************************/

  /********
  BLOCKS
  *********/
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  /********
  ELEMENTS
  *********/
  .container__secondary__feat-img {
    width: 18.5rem;
    height: 15rem;
    display: block;
    margin: 0 auto;
  }

  .container__column {
    flex-grow: 0.5;
    flex-basis: 50%;
  }

  .container__secondary {
    order: 1;
  }

  .container__secondary__heading {
    margin-top: 0.5rem;
  }


  /********
  MODIFIERS
  *********/

  /************************
  FOOTER
  ************************/

  /********
  BLOCKS
  *********/
  /********
  ELEMENTS
  *********/

  /********
  MODIFIERS
  *********/



}
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
	<title>Best City Guide</title>
	<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="../css/normalize.css">
	<link rel="stylesheet" href="../css/style.css">
</head>
<body>

	<header class="main-header">
			<h1 class="main-header__name">Best City Guide</h1>
				<ul class="main-header__main-nav">
					<li class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow "><a class="main-header__main-nav__a-remove-decoration" href="icecream.html">ice cream</a></li>
					<li class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow"><a class="main-header__main-nav__a-remove-decoration" href="#">donuts</a></li>
					<li class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow"><a class="main-header__main-nav__a-remove-decoration" href="#">tea</a></li>
					<li class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow"><a class="main-header__main-nav__a-remove-decoration" href="#">coffee</a></li>
				</ul>
	</header><!--/.main-header-->

	<section class="banner">
		<img class="banner__logo" src="../img/city-logo.svg" alt="City">
		<h1 class="banner__headline">The Best City</h1>
		<p class="banner__tagline">The best drinks and eats in the best city ever&period;</p>
	</section><!--/.banner-->
	<main>
		<!-- CONTAINER I CHOSE TO USE THE SECTION ELEMENT OVER THE DIV ELEMENT -->
		<section class="container">
			<article class="container__primary container__column">
				<h2 class="container__heading">Welcome&excl;</h2>
				<p class="container__paragraph">Everything in this city is worth waiting in line for&period;</p>
				<p class="container__paragraph">Cupcake ipsum dolor sit&period; Amet chocolate cake gummies jelly beans candy bonbon brownie candy&period; Gingerbread powder muffin&period; Icing cotton candy&period; Croissant icing pie ice cream brownie I love cheesecake cookie&period; Pastry chocolate pastry jelly croissant&period;</p>
				<p class="container__paragraph">Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar&period; Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll&period; Tootsie roll wafer I love chocolate donuts&period;</p>
			</article><!--/.secondary-->

			<article class="container__secondary container__column">
				<h2 class="container__secondary__heading">Great food</h2>
				<img class="container__secondary__feat-img" src="../img/treats.svg" alt="Drinks and eats">
				<p>Croissant macaroon pie brownie&period; Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate&period; Wafer lollipop dessert&period; Bonbon jelly beans pudding dessert sugar plum&period; Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love&period; Gummi bears pie gingerbread lollipop&period;</p>
			</article><!--/.primary-->

			<article class="container__tertiary container__column">
				<h2 class="container__heading">How to get here</h2>
				<p><strong>Plane&colon; </strong>Tiramisu caramels gummies chupa chups lollipop muffin&period; Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake&period;</p>
				<p><strong>Train&colon; </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops&period; Lollipop gummi bears dessert muffin I love fruitcake toffee pie&period;</p>
				<p><strong>Car&colon; </strong>Jelly cotton candy bonbon jelly&dash;o jelly&dash;o I love&period; I love sugar plum chocolate cake pie I love pastry liquorice&period;</p>
			</article><!--/.tertiary-->
		</section>

	</main>

	<footer class="main-footer">
	    <div class="footer-content">
	      <div class="main-footer__list-column">
						<h3 class="main-footer__heading">Company</h3>
		        <ul class="main-footer__list">
		          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">About Us</a></li>
		          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">Careers</a></li>
		          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">Investor Relations</a></li>
		        </ul>
	      </div>
	      <div class="main-footer__list-column">
						<h3 class="main-footer__heading">Services</h3>
		        <ul class="main-footer__list">
		          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">My Account</a></li>
		          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">Track Your Order</a></li>
		          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">Credit Card</a></li>
		          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">Gift Card</a></li>
		        </ul>
	      </div>
	      <div class="main-footer__list-column">
					<h3 class="main-footer__heading">Shop</h3>
 	        <ul class="main-footer__list">
 	          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">Find a Store</a></li>
 	          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">Store Services</a></li>
 	          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">Weekly Ad</a></li>
 	        </ul>
				 </div>
	      <div class="main-footer__list-column">
					 <h3 class="main-footer__heading">Resources</h3>
 	        <ul class="main-footer__list">
 	          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">Return Policy</a></li>
 	          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">Shipping Rates</a></li>
 	          <li class="main-footer__nav__li"><a class="main-footer__nav__a-remove-decoration" href="#">Product Availability &amp; Price</a></li>
 	        </ul>
	      </div>
	    </div>
	    <p class="main-footer__copyright">&copy;2015 Residents of The Best City Ever.</p>
	  </footer>

		<input id="bottomsearch" type="text" /><button id="bottomsearchbutton">ENTER</button><button id="bottomsearchbuttonremove">REMOVE</button>



		<script src="../js/index.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

您的代码无法正常工作，因为querySelector返回了null。没有与.main-header:last-child的选择器匹配的HTML元素。

:last-child选择器将过滤可能的结果，以便仅选择作为其父级的最后一个子级的元素。因此，.main-header:last-child将选择一个类为main-header的元素，该元素也是其父级的最后一个子级。在您的HTML中，没有与该描述匹配的元素，因为类main-header的唯一元素是body的第一个孩子，而不是最后一个。

您可能想使用.main-header > h1:last-child作为选择器。这将选择一个h1元素，该元素的父元素为类main-header，并且是该父元素的最后一个子元素。

bottomSearchButtonRemove.addEventListener("click", () => {
  let removeLastChild = document.querySelector(".main-header > h1:last-child") ;
  mainHeader.removeChild(removeLastChild) ;
}) ;
相关问题
最新问题