复选框有问题。我想在选中复选框时使用删除按钮删除内容答案

【问题标题】：There is problem with checkbox. I want to delete the content with delete button when checkbox is selected复选框有问题。我想在选中复选框时使用删除按钮删除内容
【发布时间】：2021-04-30 17:31:54
【问题描述】：

我尝试制作一个 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>

【问题讨论】：

你能给出确切的错误信息吗？它是否指定出错的行？
第 62 行的 Javascript 文件。存在删除问题。单击复选框然后按删除按钮后，我想随机删除任何行。但它的代码不起作用。

标签： javascript html css checkbox checkboxlist

【解决方案1】：

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

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

另外你的 JS 格式不正确，addButton 事件连接没有结束标签，复制并粘贴这段代码到你的脚本中：

        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 checkbox = document.getElementById("check");

            if (checkbox.checked) {
                alert(checkbox.value)
                checkbox.parentElement.parentElement.remove();
            }
        });

【讨论】：

感谢您的反馈，让我很开心。该代码有效，但仅从第一行中删除选中的行。如果我删除任何随机行，请说第 4 行代码不起作用。我做什么来随机删除任何行。
您需要一个元素集合，我在答案的第二段中提到了它，您需要一个所有复选框的集合，然后遍历所有这些复选框并检查它们的选中属性是否为设置为 true，如果是这样删除该行，请记住同时更新集合，否则会产生错误。