复选框有问题选中复选框时，我想使用删除按钮删除内容

问题描述

我正在尝试制作一个 Web 应用程序，但复选框中有一个小问题。每当我选择复选框时，它都会给我输出说未定义。我想在选中复选框时使用删除按钮删除内容我无法发现问题究竟是什么导致了任何人都可以解释我。需要帮助

var btnAdd = document.getElementById("add");
var btnRem = document.getElementById("rem");
var container = document.getElementById("cont");
var frm = document.getElementById("frm");

btnAdd.addEventListener("click",() => {
  var x = document.getElementById("txt").value;
  var y = document.getElementById("country");
  var h = document.getElementById("country").value;

  var element4 = document.createElement("input");
  element4.type = "checkBox";
  element4.id = "check";

  if (!x || !h) {
  } else {
    if (y.selectedindex == 0) {
    } else {
      var base = document.createElement("div");
      var b = container.appendChild(base);
      b.id = "base";

      var element = document.createElement("div");
      var d = b.appendChild(element);

      d.appendChild(element4);

      var element1 = document.createElement("input");
      d.appendChild(element1);
      element1.value = x;
      element1.id = "text2";
      element1.readOnly = true;

      var array = new Array();

      for (var i = 0; i < y.length; i++) {
        array.push(y.options[i].text);
      }

      var element = document.createElement("div");
      var d1 = b.appendChild(element);

      var element2 = document.createElement("select");
      var O = d1.appendChild(element2);

      for (var j = 1; j < array.length; j++) {
        O.innerHTML +=
          "<option value=" + array[j] + ">" + array[j] + "</option>";
      }

      O.value = h;

      frm.reset();
      y.selectedindex = 0;

    
    }
  }


btnRem.addEventListener("click",()=>{

    var g = document.getElementById("check").checked;
        
        if ( g == true ) {
            alert( this.value )
            this.parentElement.parentElement.remove();
            ;


        } 
})


 



});

*{
    margin: 0;
    padding: 0;
    Box-sizing: border-Box;
}
input,button{
    border-radius: none;
    outline: none;
    border: 1px solid black;
}
.select-country{
    max-width: 100%;
}

.container{
    max-width: 80%;
    margin: 0 auto;
    padding-top: 50px;
}

.container-1{
    max-width: 50%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
form{
    max-width: initial;
}
.container-1 :first-child{
    flex: 3;
}
.container-1 div{
    flex: 1;
}

.container-1 div input,.container-1 div select{
    min-width: 100%;
    padding: 5px 0;
}

#add,#rem{
    min-width: 100%;
    padding: 5px 0;
}

.container-2{
    max-width: 50%;
    margin: 0 auto;
    padding-top: 50px;
}

.container-2 #base{
display: flex;
padding: 10px 0;
}
.container-2 :first-child{
flex: 3;
display: flex;
}

.container-2 :first-child #check{
    flex: 0.1;
    padding: 5px 0;
}
.container-2 :first-child #text2{
    flex: 3;
    padding: 5px 0;
}
.container-2 div{
flex: 1;
}

.container-2 div select{
    padding: 5px 0;
    min-width: 100%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="UTF-8" />
    <Meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="select-country">
      <div class="container">
        <div class="container-1">
          <div>
            <form action="" id="frm"><input type="text" id="txt" /></form>
          </div>
          <div>
            <form action="" id="frm" onsubmit="return false">
              <select id="country">
                <option value="select-country" selected disabled>
                  select country
                </option>
                <option value="India">India</option>
                <option value="S.Korea">S.Korea</option>
                <option value="China">China</option>
                <option value="UAE">UAE</option>
                <option value="finland">finland</option>
                <option value="Germany">Germany</option>
                <option value="France">France</option>
                <option value="UK">UK</option>
                <option value="Bhutan">Bhutan</option>
                <option value="USA">USA</option>
                <option value="Austrailia">Austrailia</option>
              </select>
            </form>
          </div>
          <div>
            <button id="add" type="submit">Add</button>
          </div>
          <div>
            <button id="rem" type="submit">Delete</button>
          </div>
        </div>
        <div class="container-2" id="cont"></div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

解决方法

this 在箭头函数的上下文中通常是全局或窗口的父作用域，您可以阅读它here，如果您将 this.value 替换为 {{1 }} 它将返回复选框值，当您单击是时，它将删除选中的行。

此外，如果您想删除多个选中的行，则需要使用不同的选择器，例如。 getElementsByTagName 或 querySelectorAll 以通过 ID 获取元素集合而不是单个元素（ID 应该是唯一的，因此也要实现某种索引，因为您的网站有多个重复项ID）

此外，您的 JS 格式不正确，addButton 事件连线没有结束标记，请将此代码复制并粘贴到您的脚本中：

document.getElementById("check").value

checkbox checkbox checkboxlist checkboxlist html javascript

复选框有问题选中复选框时，我想使用删除按钮删除内容

问题描述

解决方法

相关问答