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.

j0hnik 12.09.2018 17:44
рони,
Ок, но только ради тебя!

рони 12.09.2018 18:37
j0hnik,
а можно прежнее решение, но с исправленным селектором? :)

j0hnik 12.09.2018 19:01
рони,
:last-child в него добавить, об этом?

рони 12.09.2018 19:17
j0hnik,
да и можно просто last

рони 12.09.2018 19:24
Menshakovich,
div[name="delete"] очень странное сочетание div + name

рони 12.09.2018 19:25
Цитата:
Сообщение от рони
да и можно просто last
 
<!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 name="delete">&times</div></div>');
            $('div[name="delete"]:last').click(function(){ $(this).parent().remove();});
        });
    </script>
</body>
</html>


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