JavaScript removeChild1

问题描述 投票：1回答：2

我是编码新手，可以想象我正在忽略一个简单的概念。我正在尝试删除张贴在dom上的表单输入，但是removeChild代码不起作用，我在做什么错？我使用的技术是物化框架和纯JavaScript。当检查控制台时，我将得到一个错误，即materialize.min.js：6 Uncaught TypeError：无法读取HTMLBodyElement.value（materialize.min.js：6）的null属性'M_Modal'，请帮助：）

// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', () => {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  });


//Delete Exercises 
const delExerciseBtn = document.querySelector('.del-exercise-btn');

delExerciseBtn.addEventListener('click', (e) => {
if(e.target.className == 'delete'){
  const h6 = e.target.parentElement;
  h6.removeChild(e.target);
}
});

// Add User's To the Dom.
const addExerciseDom = document.querySelector('.exercise-dom');
const exerciseForm = document.querySelector('.exercises-form');
const disabledExersiceBtn = document.querySelector('.disabled-exersicebtn');

exerciseForm.addEventListener('submit', (e) => {
e.preventDefault();

  // Get Input Value
  const value = exerciseForm.querySelector('input[type="text"]').value;

  // Create Elements
  const h6 = document.createElement('h6');
  
  // Add Content
  h6.textContent = value;
  
  // Append To Dom
  addExerciseDom.appendChild(h6);  

  //Disable Btn
  disabledExersiceBtn.setAttribute('disabled', 'disabled');


});
   /*------------------ Modals & forms--------------------*/
      .modal{
        border: 0.3rem solid black;
        overflow-y: visible;
      }

      .modal-position{
        margin-top: 50%;
      }
      
      .modal .modal-footer{
        text-align: center;
      }

      label{
          color: #000 !important;  
      }
    
     
      /* Remove Btn */
      .remove-padding{
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        
      }

      
      
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title></title>

  <!-- Google icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Sytle.css -->
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <!----- user's input ------->
  <div class="row">
    <div class="col s12 center valign-wrapper center-align">
      <div class=" exercise-dom delete">
        <!--Users text input h6---->
      </div>
    </div>
  </div>

  <!-- Btn/Modals/form -->
  <div class="row">
    <!-- Dom Btn -->
    <div class="col s12 center ">
      <a href="#exercise" class="btn-floating btn-small darken-4 z-depth-2 black center modal-trigger disabled-exersicebtn">
        <i class="material-icons white-text">add </i>
      </a>
    </div>
  </div>
  <!-- Modal/form -->
  <div class="modal modal-position" id="exercise">
    <div class="modal-content">

      <div class="row exercises-padding">
        <form class="col s12 exercises-form" autocomplete="off">
          <div class="input-field col s10">
            <i class="material-icons prefix">fitness_center</i>
            <input type="text" id="autocomplete-input" class="autocomplete center">
            <label for="autocomplete-input">
              <h6>Exercises</h6>
            </label>
          </div>
          <div class="modal-footer">
            <input class="modal-close btn black" type="submit" value="Submit">
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Remove Users Btn -->
  <div class="col s12 center remove-padding">
    <a href="#" class="btn-floating btn-small darken-4 z-depth-2 black center modal-trigger del-exercise-btn">
      <i class="material-icons white-text ">remove </i>
    </a>
  </div>

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <!-- app.JavaScript -->
  <script src="app.js"></script>
</body>

</html>
javascript materialize removechild
2个回答
1
投票

您可以这样操作

      // ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', () => {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  });


//Delete Exercises 
const delExerciseBtn = document.querySelector('.del-exercise-btn');

delExerciseBtn.addEventListener('click', (e) => {
  const h6 = document.getElementsByTagName('h6')[0];
   h6.remove();
});

// Add User's To the Dom.
const addExerciseDom = document.querySelector('.exercise-dom');
const exerciseForm = document.querySelector('.exercises-form');
const disabledExersiceBtn = document.querySelector('.disabled-exersicebtn');

exerciseForm.addEventListener('submit', (e) => {
e.preventDefault();

  // Get Input Value
  const value = exerciseForm.querySelector('input[type="text"]').value;

  // Create Elements
  const h6 = document.createElement('h6');
  
  // Add Content
  h6.textContent = value;
  
  // Append To Dom
  addExerciseDom.appendChild(h6);  

  //Disable Btn
  disabledExersiceBtn.setAttribute('disabled', 'disabled');


});
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title></title>

  <!-- Google icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Sytle.css -->
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <!----- user's input ------->
  <div class="row">
    <div class="col s12 center valign-wrapper center-align">
      <div class=" exercise-dom delete" id="model3">
        <!--Users text input h6---->
      </div>
    </div>
  </div>

  <!-- Btn/Modals/form -->
  <div class="row">
    <!-- Dom Btn -->
    <div class="col s12 center ">
      <a href="#exercise" class="btn-floating btn-small darken-4 z-depth-2 black center modal-trigger disabled-exersicebtn">
        <i class="material-icons white-text">add </i>
      </a>
    </div>
  </div>
  <!-- Modal/form -->
  <div class="modal modal-position" id="exercise">
    <div class="modal-content">

      <div class="row exercises-padding">
        <form class="col s12 exercises-form" autocomplete="off">
          <div class="input-field col s10">
            <i class="material-icons prefix">fitness_center</i>
            <input type="text" id="autocomplete-input" class="autocomplete center">
            <label for="autocomplete-input">
              <h6>Exercises</h6>
            </label>
          </div>
          <div class="modal-footer">
            <input class="modal-close btn black" type="submit" value="Submit">
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Remove Users Btn -->
  <div class="col s12 center remove-padding">
    <a href="#" class="btn-floating btn-small darken-4 z-depth-2 black center del-exercise-btn">
      <i class="material-icons white-text ">remove </i>
    </a>
  </div>

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>

</html>
1
投票

对于h6的多个值最好在每个新h6中添加id检查体重和运动

// Materialize Initialization Of Autocomplete, Exercise.
document.addEventListener('DOMContentLoaded', () => {
  var elems = document.querySelectorAll('.autocomplete');
  var instances = M.Autocomplete.init(elems,{
    data: {
      "Lat Pull Down": null,
      "Lat  Down": null,
    },
    limit:2,
    minLength:1,
  });
});

// Materialize Initialization Of Box Select, Sets and Reps.
document.addEventListener('DOMContentLoaded', () => {
  var elems = document.querySelectorAll('select');
  var instances = M.FormSelect.init(elems);
});

// Materialize Initialization Of Weights CharacterCount
document.addEventListener('DOMContentLoaded', () => {
  var textNeedCount = document.querySelectorAll('.weightcountercount');
  M.CharacterCounter.init(textNeedCount);
});
//need to put restrition on the number typed into the box without it submitting


// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.modal');
  var instances = M.Modal.init(elems);
});


// ------------ Add Form's Inputs Onto The HomePage----------------

//-------------Exercises------------
// Delete Exercises From The Dom
const delExerciseBtn = document.querySelector('.del-exercise-btn');

delExerciseBtn.addEventListener('click', (e) => {
  // Remove Form Input
  const h6_e = document.getElementById('h6_exercise');
   h6_e.remove();
   // Remove Disable Btn
   disabledExersiceBtn.removeAttribute('disabled');
});


// Add User's Exercises To The Dom.
const addExerciseDom = document.querySelector('.exercise-dom');
const exerciseForm = document.querySelector('.exercises-form');
const disabledExersiceBtn = document.querySelector('.disabled-exersicebtn');

exerciseForm.addEventListener('submit', (e) => {
e.preventDefault();

  // Get Input Value
  const value = exerciseForm.querySelector('input[type="text"]').value;

  // Create Elements
  // const h6 = document.createElement('h6');
  
  //for exercise
  const h6_exercise = document.createElement('h6');
  
  // Add Content
  h6_exercise.textContent = value;
  //adding id
  h6_exercise.setAttribute("id", "h6_exercise");
  // Append To Dom
  addExerciseDom.appendChild(h6_exercise);  

  //Disable Btn
  disabledExersiceBtn.setAttribute('disabled', 'disabled');

});

//---------------------Weight----------------------
// Delete Exercises From The Dom
const delWeightBtn = document.querySelector('.del-weight-btn');

delWeightBtn.addEventListener('click', (e) => {
  // Remove Form Input
  let h6_r = document.getElementById('h6_weight');
   h6_r.remove();
});

// Add User's Weight To The Dom.
const addWeightDom = document.querySelector('.weight-dom');
const weightForm = document.querySelector('.weight-form');

weightForm.addEventListener('submit', (e) => {
e.preventDefault();
 if(document.getElementById('h6_weight'))
  {
  let h6_r = document.getElementById('h6_weight');
  
  h6_r.remove();  
 }
   // Get Input Value
   const value = weightForm.querySelector('input[type="number"]').value;
   const value1 = weightForm.querySelector('input[type="text"]').value;
   //console.log(value, value1);

   // Create Elements
   const h6_weight = document.createElement('h6');
  
  h6_weight.setAttribute('id','h6_weight')
   //h6.classList.add("center");// not working

   // Add Content
   h6_weight.textContent = value + " " + value1;
   
   // Append To Dom
   addWeightDom.appendChild(h6_weight);
   
   
  });



// ------------------Add Exercises Colum----------------------
//const addMoreBtn = document.getElementById("addmorebtn");
////const addColums = document.getElementById("addcolumns");


//addMoreBtn.addEventListener('click', (e) => {
   // e.preventDefault();

   // const text = 
   // `<div class="col s4 height"></div>
   // <div class="col s2 height "></div>
   // <div class="col s2 height"></div>
   // <div class="col s2 height"></div>
   // <div class="col s2 height"></div>`
    
    //const position = "beforeend";
    //addColums.insertAdjacentHTML(position, text);
//});
body {
         display: flex;
         min-height: 100vh;
         flex-direction: column;
      }

      main {
        flex: 2 0 auto;
      }

      nav { 
        margin-bottom: 1%;
      }

    p {
        font-size: 15px;
        font-weight: bold;
      
      }
      h6{
        font-size: 16px;
        font-weight: bold;
      }

      .topbottenborder {
        border: 0.2rem solid black;
     
      }

      .border {
        border: 0.10rem solid black;
      
      }

      .addbtnmargin {
        margin-top: 5%;
      }

      ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: black;
        opacity: 1; /* Firefox */
        font-weight: bold;
      }

      input:focus::placeholder {
        color: transparent;
      }
      
      
    /*------------------ Modals & forms--------------------*/
      .modal{
        border: 0.3rem solid black;
        overflow-y: visible;
      }

      .modal-position{
        margin-top: 50%;
      }
      
      .modal .modal-footer{
        text-align: center;
      }

      label{
          color: #000 !important;  
      }
    
       /* Exersice*/
       /* Label Underline Focus Color */
      .input-field .prefix.active {
        color: black !important;
      }

       /* Label Underline Focus Color */
      .row .input-field input:focus {
        color: black !important;
        border-bottom: 1px solid black !important;
        box-shadow: 0 0px 0 0 black !important;
      }

      .autocomplete-content li .highlight{
        color: black !important;
      }

      input#autocomplete-input.autocomplete.center{
        border-bottom: 1px solid black;
        font-size: 14px;
        font-weight: bold;
      }

      .exercises-padding{
        padding-left: 10px !important;
        padding-right: 10px !important;
      }
      input#autocomplete-input.autocomplete.center{
        padding-top: 8px;
      }
      .material-icons{
        line-height: 1.8 !important;
      }

      /* Sets */
      .select-dropdown{
       text-align: center;
       border-bottom: 1px solid black !important;
       font-weight: bold;
      }

      .sets-reps-padding{
       padding-left: 50px !important;
       padding-right: 50px !important;
      }

      /* Reps */
    
      ul.dropdown-content.select-dropdown li span {
       color: #000; 
       text-align: center;
       font-weight: bold;
      }
      ul.dropdown-content.select-dropdown{
       max-height: 273px;
      
      }
      /* ul.dropdown-content.select-dropdown li {
       
      }  */
    
      /* Weights */
      
      .center-weight{
        margin: auto;
      }
      span.character-counter{
        width: 0% !important;
        float: left !important;
      }
      .weight-padding{
        padding: 0px  !important;
      }
      
      .kg-position {
        margin-top: 1rem;
      }

      .weight-position {
        margin-top: 2.13rem;
      }

     input.center.weightcountercount{
        border-bottom: 1px solid black;
      }
     

      /* Remove Btn */
      .remove-padding{
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        
      }

      
      
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
      <title>Workout Plan</title>

      <!-- Google icons -->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  
      <!-- Sytle.css -->
      <link rel="stylesheet" type="text/css" href="style.css">        
  
</head>
<body>
    
<main>

   <div class="row topbottenborder " id="addcolumns"> 
    <div class="col s4 center "> <p>Exercises</p></div>
    <div class="col s2 center"> <p>Sets</p></div>
    <div class="col s2 center"> <p>Reps</p></div>
    <div class="col s2 center"> <p>Weight</p></div>
    <div class="col s2 center"> <p>Rest</p></div>
  </div>
<!--input is placed -->
  <div class="row">
    <div class="col s12 valign-wrapper center-align">
    <div class="col s4 exercise-dom" id="delete"></div> 
    <div class="col s2" id="delete1"></div> 
    <div class="col s2" id="delete2"></div>
    <div class="col s2 weight-dom" id="delete3"></div>
    <div class="col s2" id="delete4"></div>
    </div>
  </div>
  
<!---------- Modals / forms ------------>
  <!--Exercise btn-->
  <div class="row">
    <div class="col s4 center ">
      <a href="#exercise" class="btn-floating btn-small darken-4 z-depth-2 black center modal-trigger disabled-exersicebtn">
        <i class="material-icons white-text">add </i>
      </a>
    </div>
    <!--Modal-->
  <div class="modal modal-position" id="exercise">
   <div class="modal-content">
    <div class="row exercises-padding">
     <form class="col s12 exercises-form" autocomplete="off">
       <div class="input-field col s10"> 
         <i class="material-icons prefix">fitness_center</i>
          <input type="text" id="autocomplete-input"  class="autocomplete center">
            <label for="autocomplete-input" ><h6>Exercises</h6></label>
       </div>
       <div class="modal-footer">
         <input class="modal-close btn black" 
         type="submit" value="Submit">
       </div>
     </form>
    </div>     
   </div>
  </div>
     
    <!--  Sets btn -->
  <div class="col s2 center"><a href="#sets" class="btn-floating btn-small darken-4 z-depth-2 black center modal-trigger"><i class="material-icons white-text ">add </i></a></div>
   
    <!--Set Modal-->
   <div class="modal modal-position" id="sets">
    <div class="modal-content">
    <div class="row col s12 sets-reps-padding">
      <div class=" col s12 center">
        <label><h6>Add Sets</h6></label>
          <select class="">
          <option class="" value="0" disabled selected>0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="1">5</option>
          <option value="2">6</option>
         </select>
        <div class="modal-footer">
          <input class="modal-close btn black" type="submit" value="Submit">
        </div>
      </div>
    </div>
   </div>
  </div>

    <!-- Reps btn -->
    <div class="col s2 center"><a href="#reps" class="btn-floating btn-small darken-4 z-depth-2 black center modal-trigger"><i class="material-icons white-text ">add </i></a></div>
    
    <!--Reps Modal-->
    <div class="modal modal-position" id="reps">
      <div class="modal-content">
        <div class="row col s12 sets-reps-padding">
        <div class=" col s12 center">
          <label class=""><h6>Add Reps</h6></label>
            <select class="">
            <option value="0" disabled selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="1">4</option>
            <option value="2">5</option>
            <option value="3">6</option>
            <option value="1">7</option>
            <option value="2">8</option>
            <option value="3">9</option>
            <option value="1">10</option>
            <option value="2">11</option>
            <option value="3">12</option>
           </select>
           <div class="col s12">
            <div class="modal-footer">
             <input class="modal-close btn black" type="submit" value="Submit">
            </div>
           </div>
          </div>
        </div>
      </div>
     </div>
        
    <!-- Weights Btn -->
  <div class="col s2 center"><a href="#weights" class="btn-floating btn-small darken-4 z-depth-2 black center modal-trigger"><i class="material-icons white-text ">add </i></a></div>
    
    <!--Weight Btn-->
   <div class="modal modal-position" id="weights">
      <div class="modal-content weight-padding">
      <div class="row center-weight">
          <form class="col s12 center weight-margin weight-form" autocomplete="off">
            <div class="input-field col s6 weight-position"> 
               <input placeholder="Weight" type="number" data-length="3" class="center             weightcountercount">  
             </div>
             <div class=" col s6 center kg-position">
              <label> <br> </label>
              <select class="">
              <option value="Kg" selected>Kg</option>
              <option value="Lbs">Lbs</option>
              </select>
             </div>
             <div class="col s12">
              <div class="modal-footer">
               <input class="modal-close btn black" type="submit" value="Submit">
              </div>
             </div> 
          </form>
      </div> 
     </div>
    </div>
        


    <!-- Rest btn -->
    <div class="col s2 center"><a href="#rest" class="btn-floating btn-small darken-4 z-depth-2 black center modal-trigger"><i class="material-icons white-text ">add </i></a></div>
    
    <!--Rest Modal-->
    <div class="modal modal-position" id="rest">
      <div class="modal-content">
        <div class="row col s12 sets-reps-padding">
          <div class=" col s12 center">
            <label><h6>Add Rest Time</h6></label>
              <select class="">
              <option value="0" selected>0 Sec</option>
              <option value="30">30 Sec</option>
              <option value="1">1 Min</option>
              <option value="1:30">1 Min 30 Sec</option>
              <option value="2">2 Min</option>
              <option value="2:30">2 Min 30 Sec</option>
              <option value="3">3 Min</option>
              <option value="3:30">3 Min 30 Sec</option>
              <option value="4">4 Min</option>
              <option value="4:30">4 Min 30 Sec</option>
              <option value="5">5 Min </option>
             </select>
            <div class="modal-footer">
              <input class="modal-close btn black" type="submit" value="Submit">
            </div>
          </div>
        </div>
        </div>
       </div>
     
<!---------------------Remove Inputs--------------------------->
<!-- Exercise remove input btn-->
  <div class="col s4 center remove-padding">
    <a href="#delete" class="del-exercise-btn btn-floating btn-small darken-4 z-depth-2 black center modal-trigger">
      <i class="material-icons white-text ">remove</i>
    </a>
  </div>

<!-- Sets remove input btn-->
<div class="col s2 center remove-padding">
  <a href="#delete1" class="del-sets-btn btn-floating btn-small darken-4 z-depth-2 black center modal-trigger">
    <i class="material-icons white-text ">remove</i>
  </a>
</div>

<!-- Reps remove input btn-->
<div class="col s2 center remove-padding">
  <a href="#delete2" class="del-reps-btn btn-floating btn-small darken-4 z-depth-2 black center modal-trigger">
    <i class="material-icons white-text ">remove</i>
  </a>
</div>

<!-- Weight remove input btn-->
<div class="col s2 center remove-padding">
  <a href="#delete3" class="del-weight-btn btn-floating btn-small darken-4 z-depth-2 black center modal-trigger">
    <i class="material-icons white-text ">remove</i>
  </a>
</div>

<!-- Rest remove input btn-->
<div class="col s2 center remove-padding">
  <a href="#delete4" class="del-rest-btn btn-floating btn-small darken-4 z-depth-2 black center modal-trigger">
    <i class="material-icons white-text ">remove</i>
  </a>
</div>


<!--Add More Exercise Btn-->
   <div class="row">
      <div class="col s12 center addbtnmargin">
        <a href="#" class="btn darken-4 z-depth-2 black" id="addmorebtn">
          Add More Exercises
        </a>

    </div>
  </main>

     <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
       
     <!-- app.JavaScript -->
    <script src="app.js"></script>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.