Question

这让我疯了几天，我尝试了多种不同的解决方法。但出于某种原因，它不会删除该元素。任何人都能发光吗？

我的目标是点击添加输入标记，然后点击“删除”按钮。删除整个元素。

HTML Mark Up

    <div id="p_test">
    <p>
        <div class="input-file-container">
            <input class="input-file" id="my-file" type="file">
            <label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
        </div>
        <p class="file-return"></p>
    </p>
</div>

<button class="btn--add" id="addtest">
        Add
      </button>

Jquery的

$(function() {
    var test = $('#p_test');
    var i = $('#p_test p').length + 1;

    $('#addtest').on('click', function() {
        $('<p><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i +'" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div><p>').appendTo(test);
        i++;
    });

    $('body').on('click', '.remtest' function(e) {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
    });
});

我尝试过不同的方法，每种方法都失败了。

$(this).closest("p").remove();

和

$('.remtest').on('click', function() {
    if (i > 2) {
        $(this).parents('p').remove();
  i--;
    }
});

＆＃13;

$(function() {
	var test = $('#p_test');
	var i = $('#p_test p').length + 1;

	$('#addtest').on('click', function() {
		$('<p><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i +'" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div><p>').appendTo(test);
		i++;
	});

// $(this).closest("p").remove();


	// $('.remtest').on('click', function() {
	// 	if (i > 2) {
	// 		$(this).parents('p').remove();
  //     i--;
	// 	}
	// });
	$('body').on('click', '.remtest', function(e) {
		if (i > 2) {
			$(this).parents('p').remove();
			i--;
		}
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="p_test">
	<p>
		<div class="input-file-container">
			<input class="input-file" id="my-file" type="file">
			<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
		</div>
		<p class="file-return"></p>
	</p>
</div>

<button class="btn--add" id="addtest">
        Add
</button>

＆＃13;

Answer 1

不要将<p>作为代码的“容器”。我使用<p>关闭了您的<div class="container">，现在您的代码正常运行。

<强>演示

$('body').on('click', '.remtest', function(e) {
    if (i > 2) {
      $(this).closest('.container').remove();
      i--;
    }
});

使用$(this).closest('.container').remove();而非$(this).parent('.container').remove();来获取外部“容器”。

$(function() {
  var test = $('#p_test');
  var i = $('#p_test .container').length + 1;

  $('#addtest').on('click', function() {
    $('<div class="container"><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i + '" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div><div>').appendTo(test);
    i++;
  });
  $('body').on('click', '.remtest', function(e) {
    if (i > 2) {
      $(this).closest('.container').remove();
      i--;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="p_test">
  <div class="container">
    <div class="input-file-container">
      <input class="input-file" id="my-file" type="file">
      <label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
    </div>
    <p class="file-return"></p>
  </div>
</div>

<button class="btn--add" id="addtest">
        Add
</button>

Answer 2

在这里你去..你试图删除错误的元素

$(function() {
	var test = $('#p_test');
	var i = $('#p_test p').length + 1;

	$('#addtest').on('click', function() {
		$('<p><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i +'" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div></p>').appendTo(test);
		i++;
	});

// $(this).closest("p").remove();


	// $('.remtest').on('click', function() {
	// 	if (i > 2) {
	// 		$(this).parents('p').remove();
  //     i--;
	// 	}
	// });
	$('body').on('click', '.remtest', function(e) {
		if (i > 2) {
			$(this).closest('.input-file-container').remove();
			i--;
		}
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="p_test">
	<p>
		<div class="input-file-container">
			<input class="input-file" id="my-file" type="file">
			<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
		</div>
		<p class="file-return"></p>
	</p>
</div>

<button class="btn--add" id="addtest">
        Add
</button>

Answer 3

首先，不要使用jquery 第二件事是普通的javascript并不难，易于使用。因此，您可以在互联网上找到如何使用javascript完成所需的操作。

function GetId(id) {
  return document.getElementById(id);
}

const button = GetId("addtest");
button.addEventListener("click", Add);
var id = 0;

function Add() {
  files.innerHTML = files.innerHTML + 
`<div id="`+ id +`">
  <br>
  <div class="input-file-container">
    <label for="p_test" class="input-file-trigger">
      Select a file...
      <input type="text" id="p_test" name="p_test_" value=""class="input-file">
    </label>
    <p class="file-return">
    </p>
    <button class="remtest" onclick="Remove('`+ id +`')">
      Remove
    </button>
  </div>
  <br>
</div>`;
id++;
}

function Remove(id) {
  const files = GetId("files")
  files.removeChild(GetId(id));
}

<div id="p_test">
  <div>
    <div class="input-file-container">
      <input class="input-file" id="my-file" type="file">
      <label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
      </div>
    <div class="file-return" id="files"></div>
  </div>
</div>

<button class="btn--add" id="addtest">Add</button>

单击时删除<p>元素

3 个答案: