Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Удаление определенного контейнера из нескольких (https://javascript.ru/forum/jquery/75196-udalenie-opredelennogo-kontejjnera-iz-neskolkikh.html)

Menshakovich 11.09.2018 22:03

Удаление определенного контейнера из нескольких
 
Здравствуйте.Ломаю голову уже который час,но не могу осуществить .У меня есть функция, которая аналогично некоторому контейнеру string (с инпутами и прочими) добавляет такие же контейнеры .Но после этих контейнеров вставляется крестик(т.е. новые контейнеры могут быть удалены пользователем) как это осуществить? Я имею в виду,чтобы удалялась строка нажатого крестика. вот кодики.

<div id="here"><div class="string">
       <input name="one">
        <input name="two">
         </div></div>
       
       <span  id="add">ADD</span>


$('#add').click(function()
      {
        $('#here').append('<div class="string"><input name="one"><input name="two"></div><div name="delete" >&times</div>');    
                    
    $('div [name="delete"]').click(function() {
        
    //  .............. 
    
})  ;
            
      });

j0hnik 11.09.2018 22:14

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<div id="here"><div class="string">
		<input name="one">
		<input name="two">
	</div></div>
	<span  id="add">ADD</span>
	<script>
		$('#add').click(function(){
			$('#here').append('<div class="string"><input name="one"><input name="two"><div onclick="$(this).parent().remove();">&times</div></div>');    
		});
	</script>
</body>
</html>

крестик внутрь

Menshakovich 11.09.2018 22:19

Спасибо огромнейшее!!!

рони 11.09.2018 22:20

Menshakovich,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $("#add").click(function() {
        var block = $('<div class="string"><input name="one"><input name="two"></div>').appendTo("#here");
        var del = $('<div name="delete" >&times</div>').appendTo("#here");
        del.click(function() {
            del.add(block).remove()
        })
    })
});
  </script>
</head>

<body>
<div id="here"><div class="string">
       <input name="one">
        <input name="two">
         </div></div>

       <span  id="add">ADD</span>

</body>
</html>

рони 11.09.2018 22:28

Цитата:

Сообщение от j0hnik
$('div[name="delete"]').click(function(){ this.parentNode.remove(); });

жуть!!! :) сто тысяч обработчиков клика, плюс не работает в ie

j0hnik 12.09.2018 00:05

рони,
Я лишь добавил this.parentNode.remove();
для ie $(this).parent().remove();

рони 12.09.2018 00:36

Цитата:

Сообщение от j0hnik
для ie $(this).parent().remove();

ок!
а
Цитата:

Сообщение от рони
сто тысяч обработчиков клика

убрать? :)

рони 12.09.2018 00:44

j0hnik,
что бы получить более 100000 обработчиков клика, достаточно нажать кнопку add 447 раз, в вашем варианте. :lol:

j0hnik 12.09.2018 01:50

рони,
сумма арифметической прогрессии, знаю

рони 12.09.2018 09:12

Цитата:

Сообщение от j0hnik
знаю

если знаешь, зачем так делаешь? исправь селектор в строке 17.


Часовой пояс GMT +3, время: 11:23.