Question

我要创建一个添加和删除项目的按钮。单击后，“删除表单”按钮变为“添加表单”。但是，在删除和添加表单之后，我想再次删除表单，但是由于我不了解的原因，这种情况不会发生。

我正在使用最新的chrome浏览器版本。

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<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">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <title>Task 1</title>
</head>
<body style="height: 100%">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-content-center">
            <div class=""><button type="button" class="btn btn-primary">Open Google</button></div>
            <div class=""><button type="button" class="btn btn-danger" id="danger">Delete form</button></div>
            <div class="breaker w-100" style="height:10%;"></div>
            <form id="form"> 
                <div class="form-group">
                    <label for="formGroupExampleInput">Example label</label>
                    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
                </div>
                <div class="form-group">
                    <label for="formGroupExampleInput2">Another label</label>
                    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
                </div>
            </form>
        </div>
    </div>  
    <script src="./index.js"></script>
</body>
</html>

document.getElementsByClassName('btn-primary')[0].addEventListener("click", open_google);
document.getElementsByClassName('btn-danger')[0].addEventListener("click", delete_function);

let inner_form = document.getElementById('form').innerHTML;

function open_google() {
    window.open('http://google.com', '_blank');
}

let buttons;

function button_change(button) {
    switch(button) {
        case "success":
            buttons = document.getElementsByClassName('btn');
            buttons[1].innerHTML = 'Add form';
            buttons[1].className = 'btn btn-success';
            document.getElementsByClassName('btn-success')[0].addEventListener("click", add_function);
            break;
        case "danger":
            buttons = document.getElementsByClassName('btn');
            buttons[1].innerHTML = 'Delete form';
            buttons[1].className = 'btn btn-danger';
            break;
        default:
            break;
    }
}

function delete_function() {
    let element = document.getElementById('form');
    while (element.firstChild) {
      element.removeChild(element.firstChild);
    }
    button_change("success");
}

function add_function() {
    document.getElementById('form').innerHTML = inner_form;
    button_change("danger");
}

示例代码：https://codepen.io/anon/pen/xNjPYj

Answer 1

事件监听器没有被删除，因此两个函数都被调用（可能多次调用），具体取决于单击按钮的次数。

我个人认为，创建两个按钮（每个按钮具有独立的单击处理程序）并根据单击的按钮隐藏/显示它们会更容易。

但是，要解决代码中的当前问题，您需要在附加新事件监听器之前使用removeEventListener()删除以前的事件监听器。

Answer 2

您为什么不隐藏它？这要容易得多

    function toggle() {
     var element = document.getElementById("form");
      if (element.style.display === "none") {
        element.style.display = "block";
      } 
      else {
        element.style.display = "none";
      }
    }

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<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">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    

    <title>Task 1</title>
</head>
<body style="height: 100%">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-content-center">
            <div class=""><button type="button" class="btn btn-primary">Open Google</button></div>
            <div class=""><button onclick="toggle()" type="button" class="btn btn-danger" id="danger">Delete form</button></div>
            <div class="breaker w-100" style="height:10%;"></div>
            <form id="form"> 
                <div class="form-group">
                    <label for="formGroupExampleInput">Example label</label>
                    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
                </div>
                <div class="form-group">
                    <label for="formGroupExampleInput2">Another label</label>
                    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
                </div>
            </form>
        </div>
    </div>  
</body>
</html>

Answer 3

您的代码的主要问题是事件监听器不断增加但并未删除，这导致它们堆积并无法正常运行。我添加了一个函数，该函数确定按钮处于什么状态并执行正确的功能add_function或remove_function。

我也做了一些小改动

为了安全起见，现在在可能的情况下使用innerHTML至textContent
使用button.classList.add和button.classList.remove
使用ID而不是不可靠的类名找到按钮
按钮保留在变量中，而不是继续查找
删除了button_change函数，因为它难以重构

https://codepen.io/anon/pen/BexJZW

JavaScript：

document.getElementsByClassName('btn-primary')[0].addEventListener("click", open_google);

let inner_form = document.getElementById('form').innerHTML;

let add_delete_button = document.querySelector('#add-delete-button');
add_delete_button.addEventListener("click", on_add_delete_clicked);

function open_google() {
    window.open('http://google.com', '_blank');
}

function on_add_delete_clicked() {
    let is_adding = add_delete_button.classList.contains("btn-success");
    if (is_adding) {
        add_function();
    } else {
        delete_function();
    }
}

function add_function() {
    const button = add_delete_button;
    document.getElementById('form').innerHTML = inner_form;

    // Update button
    button.textContent = 'Delete form';
    button.classList.remove("btn-success");
    button.classList.add("btn-danger");
}

function delete_function() {
    let element = document.getElementById('form');
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }

    // Update button
    const button = add_delete_button;
    button.textContent = 'Add form';
    button.classList.remove("btn-danger");
    button.classList.add("btn-success");
}

HTML：

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<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">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

  <title>Task 1</title>
</head>
<body style="height: 100%">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-content-center">
            <div class=""><button type="button" class="btn btn-primary">Open Google</button></div>
            <div class=""><button type="button" class="btn btn-danger" id="add-delete-button">Delete form</button></div>
            <div class="breaker w-100" style="height:10%;"></div>
            <form id="form"> 
                <div class="form-group">
                    <label for="formGroupExampleInput">Example label</label>
                    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
                </div>
                <div class="form-group">
                    <label for="formGroupExampleInput2">Another label</label>
                    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
                </div>
            </form>
        </div>
    </div>  
    <script src="./index.js"></script>
</body>
</html>

Answer 4

此实现将执行您想要的文本和上下文切换。

function action(mouseevent) {
  const button = mouseevent.target;
  let element = document.getElementById('form');
  if(element.firstChild) {
    while (element.firstChild) {
      element.removeChild(element.firstChild);
    }
    button.innerHTML = 'Add form';
    button.classList.remove('btn-danger');
    button.classList.add('btn-success');
  } else {
    document.getElementById('form').innerHTML = inner_form;
    button.innerHTML = 'Delete Form';
    button.classList.add('btn-danger');
    button.classList.remove('btn-success');
  }      
}

重用功能删除项目

4 个答案: