Javascript 停止传播

Question

我一直在试图弄清楚如何获取动态创建的元素的索引，以便我可以编写一个函数来删除它(拼接)。

我已经弄清楚如何真正手动获取索引，但问题是我正在从事件委托(delegate)中获取传播，并且我不知道如何停止它。

我尝试将 stopPropagation()、preventDefault()、stopImmediatePropagation() 放在函数内的各个位置，并花了最后一个小时在网上阅读，试图找出如何阻止它。我什至尝试将 e.bubble 设置为 false，但没有成功。

有人能给我指出正确的方向吗？我确信这是我的经验不足，但到目前为止我只是没有想法。

// Title of Question Set
const title = document.querySelector(".input_title-input");

// Array of Questions
const questions = [];
let chosen = [];

// Selected Question
let qChosen = [];

// Toggles if a new question is selected
let toggle = 0;

// Selecting Inputs and Button
let question = document.querySelector(".input_question-input");
let answer = document.querySelector(".input_answer-input");
let submit = document.querySelector(".input_submit-button");
let display = document.querySelector(".input_display");
let card = document.querySelector(".card_container");
let start = document.querySelector(".input_start-btn");
let guessInput = document.querySelector(".guess_input");
let submitGuess = document.querySelector(".submitGuess");
let nextQuestion = document.querySelector(".nextQuestion");

// Select all display items
let displayItems = document.getElementsByClassName("input_display-item");

// Select P quiz card values
let cardQuestion = document.querySelector(".quiz_question");
let cardAnswer = document.querySelector(".quiz_answer");

// Event Listener on Submit Button for Display Items Idividually
submit.addEventListener("click", function() {
    if (question.value === "") {
        question.classList.toggle("error");
        answer.classList.toggle("error");
    } else {
        createObj();

        let trashCan = createDisplayItem();
        trashCan.addEventListener("click", function(e) {
            console.log(this.parentNode);
            console.log(questions);
            console.log(e);
            this.parentNode.remove();
        });
        inputReset();
        toggle = questions.length;
        start.removeAttribute("disabled");
    }
});

start.addEventListener("click", function() {
    console.log("clicked");
    generateCard();
});

// Event Listener to test if guess is correct
submitGuess.addEventListener("click", function() {
    if (guessInput.value.toLowerCase() === qChosen.answer.toLowerCase()) {
        card.classList.toggle("flip");
        submitGuess.disabled = true;
    } else {
        console.log("wrong or not working");
    }
});

nextQuestion.addEventListener("click", function() {
    card.classList.toggle("flip");
    submitGuess.disabled = false;
    setTimeout(generateCard, 1000);
});

// Create The object for inclusion to array
function createObj() {
    let obj = {};
    obj.question = question.value;
    obj.answer = answer.value;
    questions.push(obj);
}

// Resets inputs to blank after submit
function inputReset() {
    question.value = "";
    answer.value = "";
    if (question.classList.contains("error")) {
        question.classList.toggle("error");
        answer.classList.toggle("error");
    }
}

// Creates Each Display Item
function createDisplayItem() {
    // Create new Div
    let newUl = document.createElement("ul");

    // Create Li and Image Elements
    let liQuestion = document.createElement("li");
    let liAnswer = document.createElement("li");
    let trashCan = document.createElement("img");

    // Set img src
    trashCan.src = "../assets/trash.svg";

    // Set classes
    newUl.className = "input_display-item";
    liQuestion.className = "input_display-question";
    liAnswer.className = "input_display-answer";
    trashCan.className = "input_display-delete";

    // Set LI textContent
    liQuestion.textContent = question.value;
    liAnswer.textContent = answer.value;

    // Append Children
    display.appendChild(newUl);
    newUl.appendChild(liQuestion);
    newUl.appendChild(liAnswer);
    return newUl.appendChild(trashCan);
}

//Generating Card Information per question
function generateCard() {
    random();
    if (toggle < 0) {
        cardQuestion.textContent = "There are no more questions left";
        cardAnswer.textContent = "There are no more questions left";
    } else {
        cardQuestion.textContent = qChosen.question;
        cardAnswer.textContent = qChosen.answer;
    }
}

// Choses a random value for the selection set
function random() {
    if (questions.length === 0) {
        toggle = -1;
    } else {
        let num = Math.floor(Math.random() * questions.length);
        chosen = questions.splice(num, 1).concat(chosen);
        qChosen = chosen[0];
    }
}

// Notes
// I need to create a function that upon submit of a guess, checks its value against the answer textContent.
// I will likely need to make the text lowercase for the check to just make sure that they match exactly and that a capital letter wont create a false when its true.

/** Variables
 ---------------------------------------------------------*/
/** Reset
 ---------------------------------------------------------*/
* {
  margin: 0;
  padding: 0; }

*,
*::before,
*::after {
  box-sizing: inherit; }

html {
  box-sizing: border-box;
  font-size: 62.5%; }

body {
  font-weight: 400;
  line-height: 1.5;
  font-size: 2rem;
  background-color: #bdbdc7; }

/** Primary Container
 ---------------------------------------------------------*/
.container {
  max-width: 180rem;
  display: flex; }

.flex {
  display: flex;
  justify-content: center;
  align-items: center; }

.visible {
  visibility: hidden; }

/** Input Section
 ---------------------------------------------------------*/
input[type="text"] {
  padding: 0.5rem;
  width: auto;
  min-width: 100%;
  line-height: 2rem; }

.input {
  width: 40rem;
  height: 100%;
  padding: 1rem;
  background-color: #ccc;
  display: flex;
  align-items: flex-start;
  flex-direction: column; }
  .input_title {
    width: 100%;
    display: flex;
    flex-direction: column; }
    .input_title-label {
      display: flex;
      justify-content: center; }
    .input_title-input {
      padding: 0.5rem; }
  .input_question {
    width: 100%;
    display: flex;
    flex-direction: column; }
    .input_question-label {
      display: flex;
      justify-content: center; }
    .input_question-input {
      padding: 0.5rem; }
  .input_answer {
    width: 100%;
    display: flex;
    flex-direction: column; }
    .input_answer-label {
      display: flex;
      justify-content: center; }
    .input_answer-input {
      padding: 0.5rem; }
  .input_question-input.error, .input_answer-input.error {
    border: 2px red solid; }
  .input_submit {
    width: 100%; }
    .input_submit-button {
      margin-top: 1rem;
      padding: 0 1.5rem; }
  .input_start {
    width: 100%; }
  .input_display {
    width: 100%;
    font-size: 1.5rem;
    padding: 2rem 0 1rem 0; }
    .input_display-item {
      margin-bottom: 1rem;
      padding: .2rem 2rem;
      text-transform: capitalize;
      background-color: #fff;
      border-radius: 1rem;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center; }
    .input_display-item:nth-child(odd) {
      background-color: #aaa;
      border-radius: 1rem; }
    .input_display-delete {
      height: 1.8rem;
      width: 1.8rem; }

.input :not(.input_display) div {
  padding-bottom: 2rem; }

/** Quiz Card
 ---------------------------------------------------------*/
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; }
  .card_container {
    transform-style: preserve-3d;
    perspective: 1000px;
    width: 60rem;
    margin: 1rem;
    cursor: pointer; }
    .card_container .front {
      transform: rotateY(0deg);
      transform-style: preserve-3d; }
      .card_container .front:after {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        content: "";
        display: block;
        opacity: 0.6;
        background-color: #000;
        backface-visibility: hidden;
        border-radius: 10px; }
    .card_container .back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #cedce7;
      background: linear-gradient(45deg, #dedce7 0%, #596a72 100%);
      transform: rotateY(180deg);
      transform-style: preserve-3d; }
    .card_container .front,
    .card_container .back {
      background-color: red;
      background-size: cover;
      background-position: center;
      transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
      transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
      backface-visibility: hidden;
      text-align: center;
      min-height: 500px;
      height: auto;
      border-radius: 10px;
      color: #fff;
      font-size: 1.5rem; }

.flip {
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); }
  .flip .back {
    transform: rotateY(0deg);
    transform-style: preserve-3d; }
  .flip .front {
    transform: rotateY(-180deg);
    transform-style: preserve-3d; }

.inner {
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  outline: 1px solid transparent;
  perspective: inherit;
  z-index: 2; }

.front .inner p {
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative; }

.card_container-guess {
  padding-top: 2rem; }
  .card_container-guess .guess_input {
    width: 2rem;
    margin: 1rem auto;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55), 0px 1px 1px rgba(255, 255, 255, 0.5);
    border: 1px solid #666;
    opacity: 0.6; }
    .card_container-guess .guess_input:hover, .card_container-guess .guess_input:focus {
      opacity: .8;
      color: #08c;
      box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25), inset 0px 3px 6px rgba(0, 0, 0, 0.25); }

.btnNew {
  height: 5rem;
  width: 12rem;
  margin: 1.5rem 3rem 1rem 0;
  font-weight: 700;
  color: #333;
  background-image: linear-gradient(top, #f4f1ee, #fff);
  box-shadow: 0px 8px 30px 1px rgba(0, 0, 0, 0.3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204, 198, 197, 0.5);
  border-radius: 5%;
  position: relative;
  transition: all .1s linear;
  outline: none; }

.btnNew:after {
  color: #e9e6e4;
  content: "";
  display: block;
  font-size: 30px;
  height: 3rem;
  text-decoration: none;
  text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white;
  position: absolute;
  width: 3rem; }

.btnNew:hover {
  background-image: linear-gradient(top, #fff, #f4f1ee);
  color: #0088cc; }

.btnNew:active {
  background-image: linear-gradient(top, #efedec, #f7f4f4);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4), inset opx -3px 1px 1px rgba(204, 198, 197, 0.5);
  outline: none; }

.btnNew:active:after {
  color: #dbd2d2;
  text-shadow: 0px -1px 1px #bdb5b4, 0px 1px 1px white;
  outline: none; }

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flash</title>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="container">
        <section class="input">
            <div class="input_title">
                <label class="input_title-label" for="title">Enter a Title</label>
                <input class="input_title-input" id="title" type="text" placeholder="List of Towels">
            </div>

            <div class="input_question">
                <label class="input_question-label" for="question">Enter a Question</label>
                <input class="input_question-input" id="question" type="text" placeholder="What is 42?">
            </div>

            <div class="input_answer">
                <label class="input_answer-label" for="answer">Enter an Answer</label>
                <input class="input_answer-input" id="answer" type="text" placeholder="The Meaning Life, Universe, and Everything">
            </div>

            <div class="input_submit flex">
                <button class="input_submit-button btnNew">Submit</button>
            </div>

            <div class="input_display"></div>

            <div class="input_start flex">
                <button type="button" class="input_start-btn btnNew" disabled>Start Quiz</button>
            </div>
        </section>

        <section class="card">
            <div class="card_container">
                <div class="front">
                    <div class="inner">
                        <p class="quiz_question">Question</p>
                    </div>
                </div>

                <div class="back">
                    <div class="inner">
                        <p class="quiz_answer">Answer</p>
                    </div>
                </div>

                <div class="card_container-guess">
                    <input type="text" class="guess_input">
                    <button class="submitGuess btnNew">Submit Guess</button>
                    <button class="nextQuestion btnNew">Next Question</button>
                </div>
            </div>
        </section>
    </div>


    <!-- Custom JS -->
    <script src="js/scripts.js"></script>
</body>

</html>

Answer 1

I am wanting to figure out how to delete an item from the list

我们将函数 createDisplayItem 的最后一行更改为 ..

function createDisplayItem(){
    ...
    return newUl.appendChild(trashCan) // Added return
}

现在，您已经将新创建的垃圾桶元素的实例返回给调用代码，因此现在我们要做的就是向该特定垃圾桶元素添加一个点击事件，并让它删除其父 ul ..

submit.addEventListener("click", function() {
    ...
    let trashCan = createDisplayItem();
    trashCan.addEventListener('click', function(){
        confirm('Are you sure you want to delete this?')
        && this.parentNode.remove()
    })
    ...
});

因此，由于现在在此代码中，每个垃圾桶都负责处理自己的父元素，因此您不必再担心从父 display 元素中查找索引。