удалить родительский элемент входного элемента при условии

Question

HTML формы:

<span id="contactSpan" class="repeatEntry"> 
<ul> 
    <div id="contactSpan-1" class="subSpan-1"> 
     <li> 
      <input type="text" id="contactname-1" name="contactname-1" class="contactname"    title="Enter your Full Name" value="<?php echo $_POST['contactname']?>"/> 
     </li> 
     <li> 
      <input id="contactemail-1" type="email" name="contactemail-1" class="contactemail" title="Enter your email address" value="<?php echo $_POST['contactemail']?>"/> 
     </li> 
     <li> 
     <input id="contactmobile-1" type="tel" name="contactmobile-1" class="contactmobile" value="<?php echo $_POST['contactmobile']?>"/> 
     </li> 
     <li> 
      <input type="button" class="remove-this-button" style="display:None" id="remove-this-button-1" name="remove-this-button-1" value="Remove contact"> 
     </li> 
    </div> 
</ul> 
</span> 
<input type="button" class="addMore" id="addContact" name="addContact" value="Add another contact"> 

Я пытаюсь клонировать полный < div> класса. Я могу клонировать его. Первоначально кнопка «Удалить контакт» не отображается, но затем в элементах клона будет отображаться.

«Удалить контакт» не работает для меня, нажав эту кнопку, я пытаюсь удалить весь родительский класс < div>, который был клонирован.

Пример кода:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 
var idIncrement = 1; 
$(function() { 

//remove div class function -- not Woking 

    function removeDiv(){ 
    alert("check123"); 
    $(this).parent('div').remove(); 
    } 


// cloning the entire contact "div" -- Working 

    $('input.addMore').on('click', function() { 
     idIncrement++; 
     var $table = $('#contactSpan'); 
     var $tr = $table.find('div').eq(0).clone(); 
     $tr.appendTo($table).find('input').val(''); 

     $tr.appendTo($table).find(".remove-this-button").removeAttr("style"); 
     $tr.appendTo($table).find(".remove-this-button").attr("value", "Remove Contact").on("click", removeDiv); 
     $tr.appendTo($table).find(".remove-this-button").attr("name","remove-this-button-"+idIncrement);   
     $tr.appendTo($table).find(".remove-this-button").attr("id","remove-this-button-"+idIncrement); 
    }); 

}); 

</script> 

Он способен удалить атрибут стиля из REMOVE-кнопки, и щелкните по нему также вызов функции removeDiv. На функцию removeDiv активируется предупреждение. Но тогда только remove() часть не работает.

Answer 1

Я не уверен в вашем дублированном appendTo и нахожу. Попробуйте только добавить один раз Также ваш $ tr - это div, а не строка, а контейнер - это span, а не div. полученный html недействителен. В любом случае, если вы хотите .closest путешествовать по дереву

$tr.appendTo($table).find(".remove-this-button") 
    .on("click", function() { 
    $(this).closest('div').remove(); 
    }) 
    .attr("value", "Remove Contact")  

Answer 2

parents подходит для вас.

Получить предков каждого элемента в текущем наборе согласованных элементов, опционально отфильтрованных селектором.

parent возвращение непосредственно родителя.

Методы .parents() и .parent() аналогичны, за исключением того, что последний перемещается только на один уровень вверх по дереву DOM.

Here is working demo

попробовать это:

$(this).parents('div').remove(); 

как точка из родителей вернет вам все родительский DIV так что для получения первого Div попробовать:

$(this).parents('div')[0].remove();