文章/答案/技术大牛

发布

社区首页 >问答首页 >复选框有问题。当复选框被选中时，我想用删除按钮删除内容

问复选框有问题。当复选框被选中时，我想用删除按钮删除内容
EN

Stack Overflow用户

提问于 2021-05-01 01:31:55

回答 1查看 46关注 0票数 0

我试图制作一个web应用程序，但在checkbox中有一个小问题。每当我选中复选框时，它都会输出未定义的内容。我想删除的内容与删除按钮，当复选框被选中时，我无法捕捉的问题，到底是什么导致它，任何人可以解释我。需要帮助

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>

checkbox

checkboxlist

javascript

html

css

回答 1

Stack Overflow用户

发布于 2021-05-01 02:16:23

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

另外，如果你想删除多个选中的行，你需要使用不同的选择器，例如。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();
            }
        });

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67338140

复制

相似问题

问复选框有问题。当复选框被选中时，我想用删除按钮删除内容
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问复选框有问题。当复选框被选中时，我想用删除按钮删除内容EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问复选框有问题。当复选框被选中时，我想用删除按钮删除内容
EN