Есть проблема с флажком. Я хочу удалить содержимое с помощью кнопки удалить, когда установлен флажок

ProgramBox

Есть проблема с флажком. Я хочу удалить содержимое с помощью кнопки удалить, когда установлен флажок

Post author:admin
Запись опубликована:21 января, 2022
Post category:Вопросы по программированию

#javascript #html #css #checkbox #checkboxlist

Вопрос:

Я пытаюсь создать веб-приложение, но в нем есть небольшая проблема. всякий раз, когда я устанавливаю флажок, он выдает мне сообщение «не определено». Я хочу удалить содержимое с помощью кнопки «Удалить», когда установлен флажок, я не могу уловить проблему, что именно вызывает ее, может ли кто-нибудь объяснить мне. нужна помощь

 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>

1. Можете ли вы дать точное сообщение об ошибке? Указывает ли он, в какой строке он ошибается?

2. Файл Javascript из строки 62. существует проблема удаления. Я хочу удалить произвольно любую строку после того, как установлю флажок, а затем нажму кнопку удалить. но это не работает.

Ответ №1:

это в контексте функции со стрелкой является родительской областью, обычно глобальной или окном, вы можете прочитать об этом здесь, если вы this.value замените document.getElementById("check").value ее, она вернет значение флажка, и когда вы нажмете «да», она удалит отмеченную строку.

Кроме того, если вы захотите удалить несколько проверенных строк, вам нужно будет использовать другой селектор, например. getElementsByTagName или querySelectorAll, чтобы получить коллекцию элементов вместо одного по идентификатору(идентификаторы должны быть уникальными, поэтому также выполните некоторую индексацию, поскольку на вашем веб-сайте есть несколько дубликатов идентификаторов)

Кроме того, ваш 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();
            }
        });

1. Спасибо вам, сэр, за ваши отзывы, которые действительно делают мой день лучше. Код работает, но он удаляет только отмеченную строку только из первой строки. Пусть, если я удалю любую случайную строку, скажем, код строки 4 не работает . Что я делаю, чтобы случайным образом удалить любую строку .

2. Вам нужна коллекция элементов, я упоминал об этом во 2-м абзаце моего ответа, вам нужна коллекция всех флажков, затем вы перебираете все эти флажки и проверяете, установлено ли их свойство checked в значение true, если вы удалите эту строку, не забудьте также обновить коллекцию, иначе это приведет к ошибкам.

Метки: Есть проблема с флажком. Я хочу удалить содержимое с помощью кнопки удалить, когда установлен флажок