Удалить элемент, если он оценивается как пустой

Question

Как удалить элемент, если он пуст после проверки его текущего состояния при нажатии кнопки?

В моем случае у меня есть 4 элемента ввода каждый в своей собственной путевой точке-контейнере div. Когда нажата кнопка сохранения, я хочу проверить, нет ли какой-либо из них. Пустые элементы ввода будут удалены. Однако первый элемент ввода не может быть удален.

Это мой код до сих пор:

$(document).ready(function() { 
    $('#save-waypoint-button').click(function() { 
     checkIfWaypointBlank() 
    }); 
}); 

function checkIfWaypointBlank() { 
    $('.waypoint-container input').each(function (index, element) { 
     if (index > 0 && $('$this:text').is(":empty")) { 
      $(this).parent('div').remove(); 
     } 
    }); 
} 

Fiddle here

Answer 1

Попробуйте использовать $(this).val():

function checkIfWaypointBlank() { 
    $('.waypoint-container input').each(function (index, element) { 
     if (index > 0 && $(this).val() == '') { 
      $(this).parent('div').remove(); 
     } 
    }); 
} 

JSFIDDLE Demo

Answer 2

Есть два proble мс с кодом:

1. Ваш селектор не хватает .: $('.waypoint-container input')

2. Вы ссылаетесь на это, что в контексте каждой функции носит глобальный характер.

   var list = $('.waypoint-container input'); 
   console.log(list); //Just to ensure you are getting items... 
   list.each(function (index, element) { 
       if(!index) return; 
       var item = $(element); 
       if(item.text().trim() == '') 
        item.parent().remove(); 
   }); 
   

   }

Я обновил свой jsfiddle: http://jsfiddle.net/m1m118kd/4/