CODEWITHSUNDEEP
javascriptjquery
Gautam Jha
Gautam Jha

Reputation: 1473

remove content from form not working

i created a add_field function,
then got trouble with delete option is not working.
please fix these code. thank you in advance.

var room = 0;
function add_fields() {
    room++;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div id="remove"><div class="deleteMe">X</div><div class="label">Room ' + room +':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div></div>';
    
    objTo.appendChild(divtest)
}
$(document).ready(function(){
    $(".deleteMe").on("click", function(){
       $(this).closest("#remove").remove(); 
    });
});
        
.deleteMe{
    float: right;
    background: yellow;
    cursor:pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />

<div id="room_fileds">
</div>

Upvotes: 0

Views: 61

Answers (2)

Jobelle
Jobelle

Reputation: 2834

  <script>   
   var room = 0;
   function add_fields() {
       room++;
       var objTo = document.getElementById('room_fileds')
       var divtest = document.createElement("div");
       divtest.innerHTML = '<div class="remove"><div class="deleteMe">X</div><div class="label">Room ' + room + ':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div></div>';

       objTo.appendChild(divtest)
   }
   $(document).ready(function () {


       $(document).on("click", ".deleteMe", function () {
           $(this).closest("div.remove").remove();
       });

   });

Upvotes: 0

Umesh Sehta
Umesh Sehta

Reputation: 10683

Id should be unique first so change id to class and then change delete code with this:-

 $(document).on("click",".deleteMe", function(){
       $(this).closest(".remove").remove(); 
  });

check Here how to use on

var room = 0;
function add_fields() {
    room++;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="remove"><div class="deleteMe">X</div><div class="label">Room ' + room +':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div></div>';
    
    objTo.appendChild(divtest)
}
   
    $(document).on("click",".deleteMe", function(){
       $(this).closest(".remove").remove(); 
    });
  
        
.deleteMe{
    float: right;
    background: yellow;
    cursor:pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />

<div id="room_fileds">
</div>

Upvotes: 2

Related Questions